import { Checkbox, Table, Typography } from "antd";
import React, { 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 disabled checked={record.bill.is_credit_memo} />
      ),
    },
  ];

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

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