import { Input, Space, Table, Typography } from "antd";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { alphaSort } from "../../utils/sorters";
import Dinero from "dinero.js";
import {pageLimit} from "../../utils/config";
export default function JobCostingPartsTable({ data, summaryData }) {
  const [searchText, setSearchText] = useState("");
  const [state, setState] = useState({
    sortedInfo: {},
  });

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

  const { t } = useTranslation();

  const columns = [
    {
      title: t("bodyshop.fields.responsibilitycenter"),
      dataIndex: "cost_center",
      key: "cost_center",
      sorter: (a, b) => alphaSort(a.cost_center, b.cost_center),
      sortOrder:
        state.sortedInfo.columnKey === "cost_center" && state.sortedInfo.order,
    },
    {
      title: t("jobs.labels.sales"),
      dataIndex: "sales",
      key: "sales",
      sorter: (a, b) =>
        parseFloat(a.sales.substring(1)) - parseFloat(b.sales.substring(1)),
      sortOrder:
        state.sortedInfo.columnKey === "sales" && state.sortedInfo.order,
    },

    {
      title: t("jobs.labels.costs"),
      dataIndex: "costs",
      key: "costs",
      sorter: (a, b) =>
        parseFloat(a.costs.substring(1)) - parseFloat(b.costs.substring(1)),
      sortOrder:
        state.sortedInfo.columnKey === "costs" && state.sortedInfo.order,
    },

    {
      title: t("jobs.labels.gpdollars"),
      dataIndex: "gpdollars",
      key: "gpdollars",
      sorter: (a, b) =>
        parseFloat(a.gpdollars.substring(1)) -
        parseFloat(b.gpdollars.substring(1)),

      sortOrder:
        state.sortedInfo.columnKey === "gpdollars" && state.sortedInfo.order,
    },
    {
      title: t("jobs.labels.gppercent"),
      dataIndex: "gppercent",
      key: "gppercent",
      sorter: (a, b) =>
        parseFloat(a.gppercent.slice(0, -1) || 0) -
        parseFloat(b.gppercent.slice(0, -1) || 0),
      sortOrder:
        state.sortedInfo.columnKey === "gppercent" && state.sortedInfo.order,
    },
  ];

  const filteredData =
    searchText === ""
      ? data
      : data.filter((d) =>
          (d.cost_center || "")
            .toString()
            .toLowerCase()
            .includes(searchText.toLowerCase())
        );

  return (
    <div>
      <Table
        title={() => {
          return (
            <Space wrap>
              <Input.Search
                placeholder={t("general.labels.search")}
                value={searchText}
                onChange={(e) => {
                  e.preventDefault();
                  setSearchText(e.target.value);
                }}
              />
            </Space>
          );
        }}
        scroll={{
          x: "50%", //y: "40rem"
        }}
        onChange={handleTableChange}
        pagination={{ position: "top", defaultPageSize: pageLimit }}
        columns={columns}
        rowKey="id"
        dataSource={filteredData}
        summary={() => (
          <Table.Summary.Row>
            <Table.Summary.Cell>
              <Typography.Title level={4}>
                {t("general.labels.totals")}
              </Typography.Title>
            </Table.Summary.Cell>
            <Table.Summary.Cell>
              {Dinero(summaryData.totalSales).toFormat()}
            </Table.Summary.Cell>
            <Table.Summary.Cell>
              {Dinero(summaryData.totalCost).toFormat()}
            </Table.Summary.Cell>
            <Table.Summary.Cell>
              {Dinero(summaryData.gpdollars).toFormat()}
            </Table.Summary.Cell>
            <Table.Summary.Cell></Table.Summary.Cell>
          </Table.Summary.Row>
        )}
      />
    </div>
  );
}