import { Col, Row } from "antd";
import AlertComponent from "../alert/alert.component";
import BillDetailEditcontainer from "../bill-detail-edit/bill-detail-edit.container";
import BillsListTable from "../bills-list-table/bills-list-table.component";
import JobBillsTotal from "../job-bills-total/job-bills-total.component";
import PartsDispatchTable from "../parts-dispatch-table/parts-dispatch-table.component";
import PartsOrderListTableComponent from "../parts-order-list-table/parts-order-list-table.component";
import PartsOrderModal from "../parts-order-modal/parts-order-modal.container";
import { selectIsPartsEntry } from "../../redux/application/application.selectors";

import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";

const mapStateToProps = createStructuredSelector({
  isPartsEntry: selectIsPartsEntry
});
const mapDispatchToProps = () => ({});
export default connect(mapStateToProps, mapDispatchToProps)(JobsDetailPliComponent);

export function JobsDetailPliComponent({
  job,
  billsQuery,
  handleBillOnRowClick,
  handlePartsOrderOnRowClick,
  handlePartsDispatchOnRowClick,
  isPartsEntry
}) {
  if (isPartsEntry) {
    return (
      <Row gutter={[16, 16]}>
        <Col span={24}>
          <PartsOrderListTableComponent
            job={job}
            handleOnRowClick={handlePartsOrderOnRowClick}
            billsQuery={billsQuery}
          />
        </Col>
      </Row>
    );
  } else {
    return (
      <div>
        <PartsOrderModal />
        {billsQuery.error ? <AlertComponent message={billsQuery.error.message} type="error" /> : null}
        <BillDetailEditcontainer />
        <Row gutter={[16, 16]}>
          <Col span={24}>
            <JobBillsTotal
              bills={billsQuery.data ? billsQuery.data.bills : []}
              partsOrders={billsQuery.data ? billsQuery.data.parts_orders : []}
              loading={billsQuery.loading}
              jobTotals={job.job_totals}
            />
          </Col>
          <Col span={24}>
            <PartsOrderListTableComponent
              job={job}
              handleOnRowClick={handlePartsOrderOnRowClick}
              billsQuery={billsQuery}
            />
          </Col>
          <Col span={24}>
            <BillsListTable job={job} handleOnRowClick={handleBillOnRowClick} billsQuery={billsQuery} />
          </Col>
          <Col span={24}>
            <PartsDispatchTable job={job} handleOnRowClick={handlePartsDispatchOnRowClick} billsQuery={billsQuery} />
          </Col>
        </Row>
      </div>
    );
  }
}