import { Typography } from "antd";
import ResponsiveTable from "../responsive-table/responsive-table.component";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import CurrencyFormatter from "../../utils/CurrencyFormatter";
import { alphaSort } from "../../utils/sorters";
import "./job-reconciliation-parts-table.styles.scss";

export default function JobReconcilitionPartsTable({ jobLineState, jobLineData }) {
  const { t } = useTranslation();

  const [state, setState] = useState({
    sortedInfo: {}
  });

  const [selectedLines, setSelectedLines] = jobLineState;

  const columns = [
    {
      title: t("joblines.fields.line_desc"),
      dataIndex: "line_desc",
      key: "line_desc",
      sorter: (a, b) => alphaSort(a.line_desc, b.line_desc),
      ellipses: true,
      sortOrder: state.sortedInfo.columnKey === "line_desc" && state.sortedInfo.order
    },
    // {
    //   title: t("joblines.fields.oem_partno"),
    //   dataIndex: "oem_partno",
    //   key: "oem_partno",
    //   sorter: (a, b) =>
    //     alphaSort(
    //       a.oem_partno ? a.oem_partno : a.op_code_desc,
    //       b.oem_partno ? b.oem_partno : b.op_code_desc
    //     ),
    //   sortOrder:
    //     state.sortedInfo.columnKey === "oem_partno" && state.sortedInfo.order,

    //   render: (text, record) => (
    //     <span>
    //       {record.oem_partno ? record.oem_partno : record.op_code_desc}
    //     </span>
    //   ),
    // },
    // {
    //   title: t("joblines.fields.part_type"),
    //   dataIndex: "part_type",
    //   key: "part_type",
    //   sorter: (a, b) => alphaSort(a.part_type, b.part_type),
    //   sortOrder:
    //     state.sortedInfo.columnKey === "part_type" && state.sortedInfo.order,
    // },
    {
      title: t("joblines.fields.act_price"),
      dataIndex: "act_price",
      key: "act_price",
      sorter: (a, b) => a.act_price - b.act_price,
      width: "7rem",
      sortOrder: state.sortedInfo.columnKey === "act_price" && state.sortedInfo.order,

      render: (text, record) => <CurrencyFormatter>{record.act_price}</CurrencyFormatter>
    },
    {
      title: t("joblines.fields.part_qty"),
      dataIndex: "part_qty",
      key: "part_qty",
      width: "4rem"
    },
    {
      title: t("joblines.fields.total"),
      dataIndex: "total",
      width: "7rem",
      key: "total",
      sorter: (a, b) => a.act_price * a.part_qty - b.act_price * b.part_qty,
      sortOrder: state.sortedInfo.columnKey === "total" && state.sortedInfo.order,

      render: (text, record) => <CurrencyFormatter>{record.act_price * record.part_qty}</CurrencyFormatter>
    },

    {
      title: t("joblines.fields.status"),
      dataIndex: "status",
      key: "status",
      sorter: (a, b) => alphaSort(a.status, b.status),
      width: "6rem",
      sortOrder: state.sortedInfo.columnKey === "status" && state.sortedInfo.order
    }
  ];

  const handleTableChange = (pagination, filters, sorter) => {
    setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
  };
  const handleOnRowClick = (selectedRecordKeys) => {
    setSelectedLines(selectedRecordKeys);
  };

  return (
    <div>
      <Typography.Title level={4}>{t("jobs.labels.lines")}</Typography.Title>
      <ResponsiveTable
        pagination={false}
        columns={columns}
        mobileColumnKeys={["status", "line_desc", "total", "oem_partno"]}
        size="small"
        scroll={{ y: "60vh" }}
        rowKey="id"
        dataSource={jobLineData}
        onChange={handleTableChange}
        rowSelection={{
          onChange: handleOnRowClick,
          getCheckboxProps: (record) => ({
            disabled: record.removed
          }),
          selectedRowKeys: selectedLines
        }}
        rowClassName={(record) => record.removed && "text-strikethrough"}
      />
      <div style={{ fontStyle: "italic", margin: "4px" }}>
        {t("jobs.labels.reconciliation.removedpartsstrikethrough")}
      </div>
    </div>
  );
}
