"use client";
import { TrashIcon } from "@/assets/icons";
import EmptyListWrapper from "@/components/HOC/EmptyListWrapper";
import ConfirmationModal from "@/components/ui/ConfirmationModal";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} 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 { useContactUsListPresenter } from "./useContactUsListPresenter";

const ContactUsTable = () => {
  const {
    columns,
    pathname,
    router,
    isPending,
    contacts,
    onConfirmDelete,
    setIsModalOpen,
    setCurrentContact,
    isModalOpen,
    currentContact,
  } = useContactUsListPresenter();
  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">
      <Table>
        <TableHeader>
          <TableRow>
            {columns.map((columns) => (
              <TableHead
                colSpan={100}
                className="text-start uppercase"
                key={columns}
              >
                {columns}
              </TableHead>
            ))}
          </TableRow>
        </TableHeader>
        {isPending && <TableSkeleton column={columns.length} />}
        <TableBody>
          <EmptyListWrapper
            list={contacts ?? []}
            columns={columns}
            emptyMessage="No contact us is submitted"
          >
            {contacts?.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?.full_name}
                </TableCell>
                <TableCell className="text-start" colSpan={100}>
                  {item?.email}
                </TableCell>
                <TableCell className="text-start" colSpan={100}>
                  {item?.status}
                </TableCell>
                <TableCell className="text-start" colSpan={100}>
                  {item?.phone}
                </TableCell>
                <TableCell className="text-start" colSpan={100}>
                  {unixToDate({ unix: item?.created_at })}
                </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={() => {
                        setCurrentContact(item);
                        setIsModalOpen(true);
                      }}
                    >
                      <Tooltip {..._TooltipDefaultParams({ id: "delete" })} />
                      <span className="sr-only">Delete Contact Us </span>
                      <TrashIcon />
                    </button>
                  </div>
                </TableCell>
              </TableRow>
            ))}
          </EmptyListWrapper>
        </TableBody>
      </Table>
      {isModalOpen && (
        <ConfirmationModal
          isOpen={isModalOpen}
          title={`Deleting ${currentContact?.full_name}`}
          message={`Are you sure?`}
          variant={"default"}
          size={"md"}
          confirmText={"Delete"}
          cancelText={"Cancel"}
          onConfirm={() => {
            onConfirmDelete();
          }}
          onCancel={() => setIsModalOpen(false)}
        />
      )}
    </div>
  );
};

export default ContactUsTable;
