import { Form, Input, Table } from "antd";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import CurrencyFormatter from "../../utils/CurrencyFormatter";
import { alphaSort } from "../../utils/sorters";
import BillFormItemsExtendedFormItem from "./bill-form-lines.extended.formitem.component";
export default function BillFormLinesExtended({
  lineData,
  discount,
  form,
  responsibilityCenters,
  disabled,
}) {
  const [search, setSearch] = useState("");
  const { t } = useTranslation();
  const columns = [
    {
      title: t("joblines.fields.line_desc"),
      dataIndex: "line_desc",
      key: "line_desc",
      width: "10%",
      sorter: (a, b) => alphaSort(a.line_desc, b.line_desc),
    },
    {
      title: t("joblines.fields.oem_partno"),
      dataIndex: "oem_partno",
      key: "oem_partno",
      width: "10%",
      sorter: (a, b) => alphaSort(a.oem_partno, b.oem_partno),
    },
    {
      title: t("joblines.fields.part_type"),
      dataIndex: "part_type",
      key: "part_type",
      width: "10%",
      filters: [
        {
          text: t("jobs.labels.partsfilter"),
          value: ["PAN", "PAP", "PAL", "PAA", "PAS", "PASL"],
        },
        {
          text: t("joblines.fields.part_types.PAN"),
          value: ["PAN", "PAP"],
        },
        {
          text: t("joblines.fields.part_types.PAL"),
          value: ["PAL"],
        },
        {
          text: t("joblines.fields.part_types.PAA"),
          value: ["PAA"],
        },
        {
          text: t("joblines.fields.part_types.PAS"),
          value: ["PAS", "PASL"],
        },
      ],
      onFilter: (value, record) => value.includes(record.part_type),
      render: (text, record) =>
        record.part_type
          ? t(`joblines.fields.part_types.${record.part_type}`)
          : null,
    },

    {
      title: t("joblines.fields.act_price"),
      dataIndex: "act_price",
      key: "act_price",
      width: "10%",
      sorter: (a, b) => a.act_price - b.act_price,
      shouldCellUpdate: false,
      render: (text, record) => (
        <>
          <CurrencyFormatter>
            {record.db_ref === "900510" || record.db_ref === "900511"
              ? record.prt_dsmk_m
              : record.act_price}
          </CurrencyFormatter>
          {record.part_qty ? `(x ${record.part_qty})` : null}
          {record.prt_dsmk_p && record.prt_dsmk_p !== 0 ? (
            <span
              style={{ marginLeft: ".2rem" }}
            >{`(${record.prt_dsmk_p}%)`}</span>
          ) : (
            <></>
          )}
        </>
      ),
    },
    {
      title: t("billlines.fields.posting"),
      dataIndex: "posting",
      key: "posting",

      render: (text, record, index) => (
        <Form.Item noStyle name={["billlineskeys", record.id]}>
          <BillFormItemsExtendedFormItem
            form={form}
            record={record}
            index={index}
            responsibilityCenters={responsibilityCenters}
            discount={discount}
          />
        </Form.Item>
      ),
    },
  ];

  const data =
    search === ""
      ? lineData
      : lineData.filter(
          (l) =>
            (l.line_desc &&
              l.line_desc.toLowerCase().includes(search.toLowerCase())) ||
            (l.oem_partno &&
              l.oem_partno.toLowerCase().includes(search.toLowerCase())) ||
            (l.act_price &&
              l.act_price.toString().startsWith(search.toString()))
        );

  return (
    <Form.Item noStyle name="billlineskeys">
      <button onClick={() => console.log(form.getFieldsValue())}>form</button>
      <Input onChange={(e) => setSearch(e.target.value)} allowClear />
      <Table
        pagination={false}
        size="small"
        columns={columns}
        rowKey="id"
        dataSource={data}
      />
    </Form.Item>
  );
}