import { Card, Input, Table } from "antd";
import React, { 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.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.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.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, rowIndex) => {
          return {
            onClick: (event) => {
              handleSelect(record);
            },
          };
        }}
      />
    </Card>
  );
}
