import { Modal } from "antd";
import React from "react";
import { useQuery } from "react-apollo";
import { useTranslation } from "react-i18next";
import { QUERY_ALL_ACTIVE_JOBS } from "../../graphql/jobs.queries";
import AlertComponent from "../alert/alert.component";
import LoadingSpinner from "../loading-spinner/loading-spinner.component";
import JobsFindModalComponent from "./jobs-find-modal.component";
import { selectBodyshop } from "../../redux/user/user.selectors";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
});

export default connect(
  mapStateToProps,
  null
)(function JobsFindModalContainer({
  bodyshop,
  loading,
  error,
  selectedJob,
  setSelectedJob,
  importOptionsState,
  ...modalProps
}) {
  const { t } = useTranslation();

  const jobsList = useQuery(QUERY_ALL_ACTIVE_JOBS, {
    fetchPolicy: "network-only",
    variables: {
      statuses: bodyshop.md_ro_statuses.open_statuses || ["Open"]
    }
  });

  return (
    <Modal
      title={t("jobs.labels.existing_jobs")}
      width={"80%"}
      okButtonProps={{ disabled: selectedJob ? false : true }}
      {...modalProps}>
      {loading ? <LoadingSpinner /> : null}
      {error ? <AlertComponent message={error.message} type='error' /> : null}
      {true ? (
        <JobsFindModalComponent
          selectedJob={selectedJob}
          setSelectedJob={setSelectedJob}
          importOptionsState={importOptionsState}
          jobsListLoading={jobsList.loading}
          jobsList={
            jobsList.data && jobsList.data.jobs ? jobsList.data.jobs : null
          }
        />
      ) : null}
    </Modal>
  );
});
