import { useQuery } from "@apollo/client";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { QUERY_ALL_ACTIVE_JOBS } from "../../graphql/jobs.queries";
import { selectBodyshop } from "../../redux/user/user.selectors";
import AlertComponent from "../alert/alert.component";
import ContractJobsComponent from "./contract-jobs.component";

const mapStateToProps = createStructuredSelector({
  //currentUser: selectCurrentUser
  bodyshop: selectBodyshop
});

export function ContractJobsContainer({ selectedJobState, bodyshop }) {
  const { loading, error, data } = useQuery(QUERY_ALL_ACTIVE_JOBS, {
    variables: {
      statuses: bodyshop.md_ro_statuses.active_statuses || ["Open"],
      isConverted: true
    },
    fetchPolicy: "network-only",
    nextFetchPolicy: "network-only"
  });
  const [selectedJob, setSelectedJob] = selectedJobState;

  const handleSelect = (record) => {
    setSelectedJob(record.id);
  };

  if (error) return <AlertComponent title={error.message} type="error" />;
  return (
    <ContractJobsComponent
      handleSelect={handleSelect}
      selectedJob={selectedJob}
      loading={loading}
      data={data ? data.jobs : []}
    />
  );
}

export default connect(mapStateToProps, null)(ContractJobsContainer);