import { Add, Eye } from "iconsax-react";
import { FC, useState } from "react";
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
import Button from "../../components/Button";
import Input from "../../components/Input";
import PageLoading from "../../components/PageLoading";
import Pagination from "../../components/Pagination";
import Td from "../../components/Td";
import { Pages } from "../../config/Pages";
import { usePermissions } from "../../hooks/usePermissions";
import { useGetCustomers } from "./hooks/useCustomerData";
import { CustomerItemType } from "./types/CustomerTypes";

const CustomerList: FC = () => {
  const { t } = useTranslation("global");
  const { canCreate, canUpdate } = usePermissions();
  const [page, setPage] = useState(1);
  const [limit, setLimit] = useState(10);
  const [search, setSearch] = useState("");
  const getCustomers = useGetCustomers(page, limit, false, search);

  const handleSearch = (value: string) => {
    if (value !== search) {
      setPage(1);
    }
    setSearch(value);
  };

  return (
    <div className="mt-4">
      <div className="flex w-full justify-between items-center">
        <div>{t("customer.customer_list")}</div>
        {canCreate("customers") && (
          <Link to={Pages.customer.create}>
            <Button className="px-5">
              <div className="flex gap-2">
                <Add
                  className="size-5"
                  color="#fff"
                />
                <div>{t("customer.add_cutomer")}</div>
              </div>
            </Button>
          </Link>
        )}
      </div>

      <div className="flex justify-end items-center mt-12">
        <div>
          <Input
            variant="search"
            placeholder={t("search")}
            className="bg-white border border-border"
            onChangeSearchFinal={handleSearch}
          />
        </div>
      </div>

      {getCustomers.isPending ? (
        <PageLoading />
      ) : (
        <div className="relative overflow-x-auto rounded-3xl mt-9 w-full">
          <table className="w-full text-sm ">
            <thead className="thead">
              <tr>
                <Td text={t("customer.name")} />
                <Td text={t("customer.company")} />
                <Td text={t("customer.email")} />
                <Td text={t("customer.active_services")} />
                <Td text={t("customer.factor")} />
                <Td text={t("customer.tickets")} />
                <Td text={t("customer.detail")} />
                <Td text={""} />
              </tr>
            </thead>
            <tbody>
              {getCustomers.data?.data?.customers?.map((item: CustomerItemType) => {
                return (
                  <tr
                    key={item.id}
                    className="tr"
                  >
                    <Td text={item.firstName + " " + item.lastName} />
                    <Td text={item?.legalUser?.registrationName} />
                    <Td text={item.email ? item.email : ""} />
                    <Td text={item.subscriptionsCount} />
                    <Td text={""}>
                      <Link to={Pages.receipts.index + `?user=${item.id}`}>
                        <div className="text-[#0047FF]">{item.invoicesCount} صورت حساب</div>
                      </Link>
                    </Td>
                    <Td text={""}>
                      <Link to={Pages.ticket.list + `?user=${item.id}`}>
                        <div className="text-[#0047FF]">{item.ticketsCount} تیکت</div>
                      </Link>
                    </Td>
                    <Td text={""}>
                      {canUpdate("customers") && (
                        <Link to={Pages.customer.update + item.id}>
                          <Eye
                            size={20}
                            color="#8C90A3"
                          />
                        </Link>
                      )}
                    </Td>
                    <Td text={""} />
                  </tr>
                );
              })}
            </tbody>
          </table>

          <Pagination
            totalPages={getCustomers.data?.data?.pager?.totalPages}
            currentPage={page}
            onPageChange={setPage}
            limit={limit}
            onLimitChange={setLimit}
          />
        </div>
      )}
    </div>
  );
};

export default CustomerList;