import { Col, Row } from "antd";
import React, { useState } from "react";
import JobReconciliationBillsTable from "../job-reconciliation-bills-table/job-reconciliation-bills-table.component";
import JobReconciliationPartsTable from "../job-reconciliation-parts-table/job-reconciliation-parts-table.component";
import JobReconciliationTotals from "../job-reconciliation-totals/job-reconciliation-totals.component";
import InstanceRenderManager from "../../utils/instanceRenderMgr";

export default function JobReconciliationModalComponent({ job, bills }) {
  const jobLineState = useState([]);
  const billLineState = useState([]);

  const invoiceLineData =
    bills
      .map((i) =>
        i.billlines.map((il) => {
          return { ...il, bill: i };
        })
      )
      .flat() || [];

  const filterFunction = InstanceRenderManager({
    imex: (j) =>
      (j.part_type !== null && j.part_type !== "PAE") ||
      (j.line_desc && j.line_desc.toLowerCase().includes("towing") && j.lbr_op === "OP13") ||
      j.db_ref === "936004", //ADD SHIPPING LINE.
    rome: (j) =>
      (j.part_type !== "PAE" && j.act_price !== 0 && j.part_qty !== 0) ||
      j.misc_amt !== 0 ||
      (j.line_desc && j.line_desc.toLowerCase().includes("towing") && j.lbr_op === "OP13") ||
      j.db_ref === "936004" //ADD SHIPPING LINE.
  });

  const jobLineData = job.joblines.filter((j) => filterFunction(j));

  return (
    <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
      <div style={{ flex: 1 }}>
        <Row gutter={8}>
          <Col span={12}>
            <JobReconciliationPartsTable jobLineData={jobLineData} jobLineState={jobLineState} />
          </Col>
          <Col span={12}>
            <JobReconciliationBillsTable invoiceLineData={invoiceLineData} billLineState={billLineState} />
          </Col>
        </Row>
      </div>
      <Row>
        <JobReconciliationTotals
          jobLines={jobLineData}
          jobLineState={jobLineState}
          billLines={invoiceLineData}
          billLineState={billLineState}
        />
      </Row>
    </div>
  );
}