"use client";
import { EyeIcon } from "@/assets/icons";
import EmptyListWrapper from "@/components/HOC/EmptyListWrapper";
import IsVisible from "@/components/ui/IsVisible";
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 {
  getPaginatedRowNumber,
  truncateString,
  unixToDate,
} from "@/utils/shared";
import { Tooltip } from "react-tooltip";

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

const NotificationHistoryTable = () => {
  const {
    columns,
    isLoading,
    metadata,
    notificationHistory,
    pathName,
    router,
    handleFilterSubmit,
    filterRegister,
    setValue,
    watch,
    search,
    isMutating,
    shouldShowPagination,
    clearAllFilters,
    tableSectionRef,
    skeletonTbodyRef,
    dataTbodyRef,
    pagination,
    handlePaginationChange,
  } = useNotificationHistoryTablePresenter();

  return (
    <>
      <ListWrapper>
        <ListHeader hasFilter={false} createButtonText="Create notification" />
        <NotificationHistoryListFilters
          filterRegister={filterRegister}
          handleFilterSubmit={handleFilterSubmit}
          isMutating={isMutating as number}
          watch={watch}
          setValue={setValue}
          search={search}
          onClearAll={clearAllFilters}
        />
        <div ref={tableSectionRef}>
          <Table>
            <TableHeader>
              <TableRow>
                {columns.map((column) => (
                  <TableHead key={column}>{column}</TableHead>
                ))}
              </TableRow>
            </TableHeader>
            {isLoading ? (
              <TableSkeleton
                ref={skeletonTbodyRef}
                column={columns.length}
                cellColSpan={1}
              />
            ) : (
              <TableBody ref={dataTbodyRef}>
                <EmptyListWrapper
                  list={notificationHistory ?? []}
                  columns={columns}
                  emptyMessage="No notifications were found"
                  isLoading={false}
                >
                  {(notificationHistory ?? []).map((item, index) => (
                    <TableRow key={item.id}>
                      <TableCell>
                        {getPaginatedRowNumber({
                          index,
                          page: metadata?.page,
                          limit: metadata?.limit,
                        })}
                      </TableCell>
                      <TableCell>{item.title}</TableCell>
                      <TableCell>{item.event_type}</TableCell>
                      <TableCell>
                        {unixToDate({
                          hasTime: true,
                          unix: item.created_at,
                        })}
                      </TableCell>
                      <TableCell>{item.recipient?.full_name}</TableCell>
                      <TableCell className="truncate">
                        {truncateString(item.message, 20, 20)}
                      </TableCell>
                      <TableCell className="capitalize">{item.priority}</TableCell>
                      <TableCell className="capitalize">{item.type}</TableCell>
                      <TableCell className="capitalize">
                        <Boolean value={item.seen} />
                      </TableCell>
                      <TableCell>
                        <Status status={item.status}>{item.status}</Status>
                      </TableCell>
                      <TableCell>
                        <button
                          type="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>
                  ))}
                </EmptyListWrapper>
              </TableBody>
            )}
          </Table>
        </div>
        <IsVisible condition={shouldShowPagination}>
          <Pagination
            currentPage={pagination.currentPage}
            totalPages={pagination.totalPages}
            onPageChange={handlePaginationChange}
          />
        </IsVisible>
      </ListWrapper>
    </>
  );
};

export default NotificationHistoryTable;
