"use client";
import { PencilSquareIcon, TrashIcon } from "@/assets/icons";
import EmptyListWrapper from "@/components/HOC/EmptyListWrapper";
import ConfirmationModal from "@/components/ui/ConfirmationModal";
import ListHeader from "@/components/ui/ListHeader";
import { Table, TableBody, TableCell, TableHead } from "@/components/ui/table";
import TableSkeleton from "@/components/ui/TableSkeleton";
import { _TooltipDefaultParams } from "@/constants/tooltip";
import { unixToDate } from "@/utils/shared";
import { Tooltip } from "react-tooltip";
import { TableHeader, TableRow } from "../../ui/table";
import useCmsTablePresenter from "./useCmsTablePresenter";

const CmsTable = () => {
  const {
    columns,
    data,
    isPending,
    isModalOpen,
    setIsModalOpen,
    currentCms,
    setCurrentCms,
    onConfirmDelete,
    router,
    pathname,
  } = useCmsTablePresenter();
  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 />
      <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>
          <EmptyListWrapper
            list={data?.data.cms ?? []}
            columns={columns}
            emptyMessage="No Cms were found"
          >
            {data?.data.cms.map((item, index) => (
              <TableRow
                key={item?.id || index}
                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.key}
                </TableCell>
                <TableCell className="text-start" colSpan={100}>
                  {unixToDate({ unix: item.created_at, hasTime: true })}
                </TableCell>
                <TableCell className="text-start xl:pr-7.5">
                  <div className="flex items-center justify-start gap-x-3.5">
                    <button
                      data-tooltip-id="delete"
                      data-tooltip-content="Delete"
                      data-tooltip-place="top"
                      className="hover:text-red-500"
                      onClick={() => {
                        setCurrentCms(item);
                        setIsModalOpen(true);
                      }}
                    >
                      <Tooltip {..._TooltipDefaultParams({ id: "delete" })} />
                      <span className="sr-only">Delete Marketing </span>
                      <TrashIcon />
                    </button>
                    <button
                      data-tooltip-id="edit"
                      data-tooltip-content="Edit"
                      data-tooltip-place="top"
                      className="hover:text-primary"
                      onClick={() => router.push(`${pathname}/edit/${item.id}`)}
                    >
                      <Tooltip {..._TooltipDefaultParams({ id: "edit" })} />
                      <span className="sr-only">Edit Marketing </span>
                      <PencilSquareIcon />
                    </button>
                    {/* <button
                      data-tooltip-id="details"
                      data-tooltip-content="Details"
                      data-tooltip-place="top"
                      onClick={() => {
                        router.push(`${pathname}/details/${item.id}`);
                      }}
                    >
                      <Tooltip {..._TooltipDefaultParams({ id: "details" })} />
                      <EyeIcon />
                    </button> */}
                  </div>
                </TableCell>
              </TableRow>
            ))}
          </EmptyListWrapper>
        </TableBody>
      </Table>
      {isModalOpen && (
        <ConfirmationModal
          isOpen={isModalOpen}
          title={`Deleting ${currentCms?.key}`}
          message={`Are you sure?`}
          variant={"default"}
          size={"md"}
          confirmText={"Delete"}
          cancelText={"Cancel"}
          onConfirm={() => {
            onConfirmDelete();
          }}
          onCancel={() => setIsModalOpen(false)}
        />
      )}
    </div>
  );
};

export default CmsTable;