import { Input, Space, Typography } from "antd";
import ResponsiveTable from "../responsive-table/responsive-table.component";
import { 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>
      <ResponsiveTable
        title={() => {
          return (
            <Space wrap>
              <Input.Search
                placeholder={t("general.labels.search")}
                value={searchText}
                onChange={(e) => {
                  e.preventDefault();
                  setSearchText(e.target.value);
                }}
                enterButton
              />
            </Space>
          );
        }}
        scroll={{
          x: "50%" //y: "40rem"
        }}
        onChange={handleTableChange}
        pagination={{ placement: "top", defaultPageSize: pageLimit }}
        columns={columns}
        mobileColumnKeys={["cost_center", "sales", "costs", "gpdollars", "gppercent"]}
        rowKey="id"
        dataSource={filteredData}
        summary={() => (
          <ResponsiveTable.Summary.Row>
            <ResponsiveTable.Summary.Cell>
              <Typography.Title level={4}>{t("general.labels.totals")}</Typography.Title>
            </ResponsiveTable.Summary.Cell>
            <ResponsiveTable.Summary.Cell>{Dinero(summaryData.totalSales).toFormat()}</ResponsiveTable.Summary.Cell>
            <ResponsiveTable.Summary.Cell>{Dinero(summaryData.totalCost).toFormat()}</ResponsiveTable.Summary.Cell>
            <ResponsiveTable.Summary.Cell>{Dinero(summaryData.gpdollars).toFormat()}</ResponsiveTable.Summary.Cell>
            <ResponsiveTable.Summary.Cell></ResponsiveTable.Summary.Cell>
          </ResponsiveTable.Summary.Row>
        )}
      />
    </div>
  );
}
