import { Card, Input, Table } from "antd";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { alphaSort } from "../../utils/sorters";

export default function ContractsCarsComponent({ loading, data, selectedCarId, handleSelect }) {
  const [state, setState] = useState({
    sortedInfo: {},
    filteredInfo: { text: "" },
    search: ""
  });

  const { t } = useTranslation();

  const columns = [
    {
      title: t("courtesycars.fields.fleetnumber"),
      dataIndex: "fleetnumber",
      key: "fleetnumber",
      sorter: (a, b) => alphaSort(a.fleetnumber, b.fleetnumber),
      sortOrder: state.sortedInfo.columnKey === "fleetnumber" && state.sortedInfo.order
    },
    {
      title: t("courtesycars.fields.status"),
      dataIndex: "status",
      key: "status",
      sorter: (a, b) => alphaSort(a.status, b.status),
      sortOrder: state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
      render: (text, record) => <div>{t(record.status)}</div>
    },
    {
      title: t("courtesycars.fields.readiness"),
      dataIndex: "readiness",
      key: "readiness",
      sorter: (a, b) => alphaSort(a.readiness, b.readiness),
      sortOrder: state.sortedInfo.columnKey === "readiness" && state.sortedInfo.order,
      render: (text, record) => t(record.readiness)
    },
    {
      title: t("courtesycars.fields.year"),
      dataIndex: "year",
      key: "year",
      sorter: (a, b) => alphaSort(a.year, b.year),
      sortOrder: state.sortedInfo.columnKey === "year" && state.sortedInfo.order
    },
    {
      title: t("courtesycars.fields.make"),
      dataIndex: "make",
      key: "make",
      sorter: (a, b) => alphaSort(a.make, b.make),
      sortOrder: state.sortedInfo.columnKey === "make" && state.sortedInfo.order
    },
    {
      title: t("courtesycars.fields.model"),
      dataIndex: "model",
      key: "model",
      sorter: (a, b) => alphaSort(a.model, b.model),
      sortOrder: state.sortedInfo.columnKey === "model" && state.sortedInfo.order
    },
    {
      title: t("courtesycars.fields.color"),
      dataIndex: "color",
      key: "color",
      sorter: (a, b) => alphaSort(a.color, b.color),
      sortOrder: state.sortedInfo.columnKey === "color" && state.sortedInfo.order
    },
    {
      title: t("courtesycars.fields.plate"),
      dataIndex: "plate",
      key: "plate",
      sorter: (a, b) => alphaSort(a.plate, b.plate),
      sortOrder: state.sortedInfo.columnKey === "plate" && state.sortedInfo.order
    }
  ];

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

  const filteredData =
    state.search === ""
      ? data
      : data.filter(
          (cc) =>
            (cc.fleetnumber || "").toLowerCase().includes(state.search.toLowerCase()) ||
            (cc.status || "").toLowerCase().includes(state.search.toLowerCase()) ||
            (cc.year || "").toLowerCase().includes(state.search.toLowerCase()) ||
            (cc.make || "").toLowerCase().includes(state.search.toLowerCase()) ||
            (cc.model || "").toLowerCase().includes(state.search.toLowerCase()) ||
            (cc.color || "").toLowerCase().includes(state.search.toLowerCase()) ||
            (cc.plate || "").toLowerCase().includes(state.search.toLowerCase())
        );

  return (
    <Card
      title={t("contracts.labels.availablecars")}
      extra={
        <Input.Search
          placeholder={t("general.labels.search")}
          value={state.search}
          onChange={(e) => setState({ ...state, search: e.target.value })}
        />
      }
    >
      <Table
        loading={loading}
        pagination={{ position: "top" }}
        columns={columns}
        rowKey="id"
        dataSource={filteredData}
        onChange={handleTableChange}
        rowSelection={{
          onSelect: handleSelect,
          type: "radio",
          selectedRowKeys: [selectedCarId]
        }}
        onRow={(record) => {
          return {
            onClick: () => {
              handleSelect(record);
            }
          };
        }}
      />
    </Card>
  );
}