"use client";
import { EyeIcon } from "@/assets/icons";
import { ShowcaseSection } from "@/components/Layouts/showcase-section";
import Pagination from "@/components/ui/pagination";
import Status from "@/components/ui/Status";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import TableSkeleton from "@/components/ui/TableSkeleton";
import { _TooltipDefaultParams } from "@/constants/tooltip";
import { truncateString, unixToDate } from "@/utils/shared";
import { Tooltip } from "react-tooltip";

import Boolean from "@/components/ui/Boolean";
import ListHeader from "@/components/ui/ListHeader";
import Modal from "@/components/ui/modal";
import NotificationHistoryListFilters from "./NotificationHistoryListFilters";
import useNotificationHistoryTablePresenter from "./useNotificationHistoryTablePresenter";

const NotificationHistoryTable = () => {
  const {
    columns,
    isLoading,
    metadata,
    notificationHistory,
    pathName,
    router,
    isFilterModalOpen,
    setIsFilterModalOpen,
    setParams,
    handleSubmit,
    register,
    setValue,
    watch,
    search,
    isMutating,
  } = useNotificationHistoryTablePresenter();

  return (
    <>
      <ShowcaseSection className="flex flex-col">
        <ListHeader
          createButtonText="Create notification"
          onFilter={() => setIsFilterModalOpen(true)}
        />
        <Table>
          <TableHeader>
            <TableRow>
              {columns.map((column) => (
                <TableHead colSpan={100} key={column}>
                  {column}
                </TableHead>
              ))}
            </TableRow>
          </TableHeader>
          {isLoading && <TableSkeleton column={columns.length} />}
          <TableBody>
            {!notificationHistory?.length ? (
              <TableRow>
                <TableCell>
                  <h2>No notifications</h2>
                </TableCell>
              </TableRow>
            ) : (
              notificationHistory.map((item, index) => (
                <TableRow key={item.id}>
                  <TableCell colSpan={100}>{index + 1}</TableCell>
                  <TableCell colSpan={100}>{item.title}</TableCell>
                  <TableCell colSpan={100}>{item.event_type}</TableCell>
                  <TableCell colSpan={100}>
                    {unixToDate({
                      hasTime: true,
                      unix: item.created_at,
                    })}
                  </TableCell>
                  <TableCell colSpan={100}>
                    {item.recipient?.full_name}
                  </TableCell>
                  <TableCell colSpan={100} className="truncate">
                    {truncateString(item.message, 20, 20)}
                  </TableCell>
                  <TableCell className="capitalize" colSpan={100}>
                    {item.priority}
                  </TableCell>
                  <TableCell className="capitalize" colSpan={100}>
                    {item.type}
                  </TableCell>
                  <TableCell className="capitalize" colSpan={100}>
                    <Boolean value={item.seen} />
                  </TableCell>
                  <TableCell colSpan={100}>
                    <Status status={item.status}>{item.status}</Status>
                  </TableCell>
                  <TableCell 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>
                  </TableCell>
                </TableRow>
              ))
            )}
          </TableBody>
        </Table>
        <Pagination
          currentPage={metadata?.page ? metadata?.page - 1 : 0}
          totalPages={metadata?.pages ?? 1}
          onPageChange={(e) => {
            setParams((currentParams) => ({
              ...currentParams,
              offset: e.selected * (metadata?.limit ?? 10),
              limit: metadata?.limit ?? 10,
            }));
          }}
        />
      </ShowcaseSection>
      <Modal
        isOpen={isFilterModalOpen}
        onClose={() => setIsFilterModalOpen(false)}
        showButtons={false}
      >
        <NotificationHistoryListFilters
          filterRegister={register}
          handleFilterSubmit={handleSubmit}
          isMutating={isMutating}
          watch={watch}
          setValue={setValue}
          setIsFilterModalOpen={setIsFilterModalOpen}
          search={search}
        />
      </Modal>
    </>
  );
};

export default NotificationHistoryTable;