import { Table, Typography } from "antd";
import React, { 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, selectedRecords) => {
    setSelectedLines(selectedRecordKeys);
  };

  return (
    <div>
      <Typography.Title level={4}>{t("jobs.labels.lines")}</Typography.Title>
      <Table
        pagination={false}
        columns={columns}
        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>
  );
}