import { useQuery } from "@apollo/client";
import { Result } from "antd";
import React from "react";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { QUERY_JOB_BY_PK } from "../../../graphql/jobs.queries";
import { selectSelectedJobId } from "../../../redux/application/application.selectors";
import ErrorResultAtom from "../../atoms/error-result/error-result.atom";
import JobsDetailDescriptionMolecule from "../../molecules/jobs-detail-description/jobs-detail-description.molecule";
import JobsLinesTableMolecule from "../../molecules/jobs-lines-table/jobs-lines-table.molecule";
import "./jobs-detail.organism.styles.scss";

const mapStateToProps = createStructuredSelector({
  //currentUser: selectCurrentUser
  selectedJobId: selectSelectedJobId,
});
const mapDispatchToProps = (dispatch) => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
});

export function JobsDetailOrganism({ selectedJobId }) {
  const { loading, error, data } = useQuery(QUERY_JOB_BY_PK, {
    variables: { jobId: selectedJobId },
    skip: !selectedJobId,
  });

  if (!selectedJobId) return <Result title="No job selected." />;
  if (error)
    return (
      <ErrorResultAtom
        title="Error fetching Job details.."
        errorMessage={JSON.stringify(error)}
      />
    );
  return (
    <div className="jobs-detail-container">
      <JobsDetailDescriptionMolecule
        loading={loading}
        job={data ? data.jobs_by_pk : null}
      />
      <JobsLinesTableMolecule
        loading={loading}
        jobLines={data ? data.jobs_by_pk.joblines : []}
      />
      {selectedJobId}
    </div>
  );
}
export default connect(mapStateToProps, mapDispatchToProps)(JobsDetailOrganism);
