"use client";

import Status from "@/components/ui/Status";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { Tooltip } from "react-tooltip";
import useTenderListPresenter from "./useTenderListPresenter";

import { ExclamationIcon, EyeIcon } from "@/assets/icons";
import ListHeader from "@/components/ui/ListHeader";
import Modal from "@/components/ui/modal";
import Pagination from "@/components/ui/pagination";
import TableSkeleton from "@/components/ui/TableSkeleton";
import { _TooltipDefaultParams } from "@/constants/tooltip";
import { cn } from "@/lib/utils";
import Link from "next/link";
import TenderListFilters from "./TenderListFilters";
const TendersTable = () => {
  const {
    allTenders,
    isPending,
    router,
    pathName,
    setParams,
    columns,
    isFilterModalOpen,
    setIsFilterModalOpen,
    filterRegister,
    handleFilterSubmit,
    search,
    watch,
    setFilterValue,
    isMutating,
  } = useTenderListPresenter();

  return (
    <div className="flex flex-col rounded-[10px] bg-white px-7.5 pb-4 pt-7.5 shadow-1 dark:bg-gray-dark dark:shadow-card">
      <ListHeader
        onFilter={() => setIsFilterModalOpen(true)}
        createButtonText="Create Tender"
      />
      <Table>
        <TableHeader>
          <TableRow className="border-none uppercase [&>th]:text-start">
            {columns.map((column) => (
              <TableHead key={column} colSpan={100}>
                {column}
              </TableHead>
            ))}
          </TableRow>
        </TableHeader>

        {isPending && <TableSkeleton column={columns.length} />}
        <TableBody>
          {allTenders?.data.tenders?.map((item, index) =>
            !item ? (
              <h6 key={index}>No tenders were found</h6>
            ) : (
              <TableRow
                key={item.id}
                className="odd:bg-gray-2 dark:odd:bg-gray-7"
              >
                <TableCell className="text-start" colSpan={100}>
                  {index + 1}
                </TableCell>
                <TableCell className="text-start" colSpan={100}>
                  {item.title}
                </TableCell>
                <TableCell className="text-start" colSpan={100}>
                  {item.country_code}
                </TableCell>

                <TableCell className={cn(`text capitalize`)} colSpan={100}>
                  {item.submission_url ? (
                    <Link target="_blank" href={item.submission_url}>
                      {item.submission_url}
                    </Link>
                  ) : (
                    "-"
                  )}
                </TableCell>
                <TableCell className={cn(`text capitalize`)} colSpan={100}>
                  <Status status={item.status}>{item.status}</Status>
                </TableCell>
                <TableCell
                  className={cn(`text flex gap-2 capitalize`)}
                  colSpan={100}
                >
                  <button
                    data-tooltip-id="details"
                    data-tooltip-content="Details"
                    data-tooltip-place="top"
                    onClick={() => {
                      router.push(`${pathName}/${item.id}`);
                    }}
                  >
                    <Tooltip
                      {..._TooltipDefaultParams({
                        id: "details",
                      })}
                    />
                    <EyeIcon />
                  </button>
                  <button
                    data-tooltip-id="feedback"
                    data-tooltip-content="Feedback"
                    data-tooltip-place="top"
                    className="text-gray-40 rounded-full bg-gray-dark bg-opacity-5 hover:text-green-dark dark:bg-gray dark:bg-opacity-5"
                    onClick={() => {
                      router.push(`${pathName}/feedback/${item.id}`);
                    }}
                  >
                    <Tooltip {..._TooltipDefaultParams({ id: "feedback" })} />
                    <ExclamationIcon />
                  </button>
                </TableCell>
              </TableRow>
            ),
          )}
        </TableBody>
      </Table>
      <Modal
        isOpen={isFilterModalOpen}
        onClose={() => setIsFilterModalOpen(false)}
        classNames="w-full xl:w-1/2"
        showButtons={false}
      >
        <TenderListFilters
          setValue={setFilterValue}
          filterRegister={filterRegister}
          handleFilterSubmit={handleFilterSubmit}
          isMutating={isMutating as number}
          search={search}
          setIsFilterModalOpen={setIsFilterModalOpen}
          watch={watch}
        />
      </Modal>
      <Pagination
        currentPage={allTenders?.meta?.page ? allTenders?.meta?.page - 1 : 0}
        totalPages={allTenders?.meta?.pages ?? 1}
        onPageChange={(e) => {
          setParams((currentParams) => ({
            ...currentParams,
            offset: e.selected * (allTenders?.meta?.limit ?? 10),
            limit: allTenders?.meta?.limit ?? 10,
          }));
        }}
      />
    </div>
  );
};

export default TendersTable;
