import { Form, Input } 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 BillFormItemsExtendedFormItem from "./bill-form-lines.extended.formitem.component";

export default function BillFormLinesExtended({ lineData, discount, form, responsibilityCenters }) {
  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 />
      <ResponsiveTable
        pagination={false}
        size="small"
        columns={columns}
        mobileColumnKeys={["line_desc", "oem_partno", "part_type", "act_price"]}
        rowKey="id"
        dataSource={data}
      />
    </Form.Item>
  );
}
