import { useLazyQuery, useQuery } from "@apollo/react-hooks";
import React from "react";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { GET_JOB_LINES_TO_ENTER_BILL } from "../../graphql/jobs-lines.queries";
import { SEARCH_VENDOR_AUTOCOMPLETE } from "../../graphql/vendors.queries";
import { selectBodyshop } from "../../redux/user/user.selectors";
import BillFormComponent from "./bill-form.component";

const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
});

export function BillFormContainer({
  bodyshop,
  form,
  billEdit,
  disabled,
  disableInvNumber,
}) {
  const { data: VendorAutoCompleteData } = useQuery(SEARCH_VENDOR_AUTOCOMPLETE);

  const [loadLines, { data: lineData }] = useLazyQuery(
    GET_JOB_LINES_TO_ENTER_BILL
  );

  return (
    <BillFormComponent
      disabled={disabled}
      form={form}
      billEdit={billEdit}
      vendorAutoCompleteOptions={
        VendorAutoCompleteData && VendorAutoCompleteData.vendors
      }
      loadLines={loadLines}
      lineData={lineData ? lineData.joblines : []}
      responsibilityCenters={bodyshop.md_responsibility_centers || null}
      disableInvNumber={disableInvNumber}
    />
  );
}
export default connect(mapStateToProps, null)(BillFormContainer);