import { Checkbox, 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";

export default function JobReconciliationBillsTable({ billLineState, invoiceLineData }) {
  const { t } = useTranslation();

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

  const [selectedLines, setSelectedLines] = billLineState;

  const columns = [
    {
      title: t("billlines.fields.line_desc"),
      dataIndex: "line_desc",
      key: "line_desc",
      ellipsis: true,
      width: "10rem",
      sorter: (a, b) => alphaSort(a.line_desc, b.line_desc),
      sortOrder: state.sortedInfo.columnKey === "line_desc" && state.sortedInfo.order
    },
    {
      title: t("billlines.labels.from"),
      dataIndex: "from",
      key: "from",

      ellipsis: true,
      render: (text, record) => `${record.bill.vendor && record.bill.vendor.name} / ${record.bill.invoice_number}`
    },
    {
      title: t("billlines.fields.actual_price"),
      dataIndex: "actual_price",
      key: "actual_price",
      sorter: (a, b) => a.actual_price - b.actual_price,
      width: "7rem",
      sortOrder: state.sortedInfo.columnKey === "actual_price" && state.sortedInfo.order,
      render: (text, record) => <CurrencyFormatter>{record.actual_price}</CurrencyFormatter>
    },
    {
      title: t("billlines.fields.actual_cost"),
      dataIndex: "actual_cost",
      key: "actual_cost",
      sorter: (a, b) => a.actual_cost - b.actual_cost,
      width: "7rem",
      sortOrder: state.sortedInfo.columnKey === "actual_cost" && state.sortedInfo.order,
      render: (text, record) => <CurrencyFormatter>{record.actual_cost}</CurrencyFormatter>
    },
    {
      title: t("joblines.fields.part_qty"),
      dataIndex: "quantity",
      key: "quantity",
      sorter: (a, b) => a.quantity - b.quantity,
      width: "4rem",
      sortOrder: state.sortedInfo.columnKey === "quantity" && state.sortedInfo.order
    },
    {
      title: t("bills.fields.is_credit_memo_short"),
      dataIndex: "is_credit_memo",
      key: "is_credit_memo",
      sorter: (a, b) => a.bill.is_credit_memo - b.bill.is_credit_memo,
      width: "3rem",
      sortOrder: state.sortedInfo.columnKey === "is_credit_memo" && state.sortedInfo.order,

      render: (text, record) => <Checkbox checked={record.bill.is_credit_memo} />
    }
  ];

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

  return (
    <div>
      <Typography.Title level={4}>{t("bills.labels.bills")}</Typography.Title>
      <ResponsiveTable
        pagination={false}
        size="small"
        scroll={{ y: "60vh" }}
        columns={columns}
        mobileColumnKeys={["line_desc", "from", "actual_price", "actual_cost"]}
        rowKey="id"
        dataSource={invoiceLineData}
        onChange={handleTableChange}
        rowSelection={{
          onChange: handleOnRowClick,
          selectedRowKeys: selectedLines,
          getCheckboxProps: (record) => {
            return { disabled: record.deductedfromlbr };
          }
        }}
      />
    </div>
  );
}
