import { Card } from "antd";
import ResponsiveTable from "../responsive-table/responsive-table.component";
import queryString from "query-string";
import { useTranslation } from "react-i18next";
import { Link, useLocation, useNavigate } from "react-router-dom";
import { DateFormatter } from "../../utils/DateFormatter";
import { alphaSort } from "../../utils/sorters";
import { pageLimit } from "../../utils/config";

export default function CourtesyCarContractListComponent({ contracts, totalContracts }) {
  const search = queryString.parse(useLocation().search);
  const { page, sortcolumn, sortorder } = search;
  const history = useNavigate();

  const { t } = useTranslation();

  const columns = [
    {
      title: t("contracts.fields.agreementnumber"),
      dataIndex: "agreementnumber",
      key: "agreementnumber",
      sorter: (a, b) => a.agreementnumber - b.agreementnumber,
      sortOrder: sortcolumn === "agreementnumber" && sortorder,
      render: (text, record) => (
        <Link to={`/manage/courtesycars/contracts/${record.id}`}>{record.agreementnumber || ""}</Link>
      )
    },
    {
      title: t("jobs.fields.ro_number"),
      dataIndex: "job.ro_number",
      key: "job.ro_number",

      render: (text, record) => <Link to={`/manage/jobs/${record.job.id}`}>{record.job.ro_number || ""}</Link>
    },
    {
      title: t("contracts.fields.driver"),
      dataIndex: "driver_ln",
      key: "driver_ln",

      render: (text, record) => `${record.driver_fn || ""} ${record.driver_ln || ""}`
    },
    {
      title: t("contracts.fields.status"),
      dataIndex: "status",
      key: "status",
      sorter: (a, b) => alphaSort(a.status, b.status),
      sortOrder: sortcolumn === "status" && sortorder,
      render: (text, record) => t(record.status)
    },
    {
      title: t("contracts.fields.start"),
      dataIndex: "start",
      key: "start",
      sorter: (a, b) => alphaSort(a.start, b.start),
      sortOrder: sortcolumn === "start" && sortorder,
      render: (text, record) => <DateFormatter>{record.start}</DateFormatter>
    },
    {
      title: t("contracts.fields.scheduledreturn"),
      dataIndex: "scheduledreturn",
      key: "scheduledreturn",
      sorter: (a, b) => a.scheduledreturn - b.scheduledreturn,
      sortOrder: sortcolumn === "scheduledreturn" && sortorder,
      render: (text, record) => <DateFormatter>{record.scheduledreturn}</DateFormatter>
    }
  ];

  const handleTableChange = (pagination, filters, sorter) => {
    search.page = pagination.current;
    search.sortcolumn = sorter.columnKey;
    search.sortorder = sorter.order;
    history({ search: queryString.stringify(search) });
  };

  return (
    <Card title={t("menus.header.courtesycars-contracts")}>
      <ResponsiveTable
        scroll={{ x: true }}
        pagination={{ placement: "top", pageSize: pageLimit, current: parseInt(page || 1), total: totalContracts }}
        columns={columns}
        mobileColumnKeys={["agreementnumber", "driver_ln", "status", "job.ro_number"]}
        rowKey="id"
        dataSource={contracts}
        onChange={handleTableChange}
      />
    </Card>
  );
}
