"use client";
import { PencilSquareIcon, TrashIcon } from "@/assets/icons";
import { Switch } from "@/components/FormElements/switch";
import ConfirmationModal from "@/components/ui/ConfirmationModal";
import IsVisible from "@/components/ui/IsVisible";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import TableSkeleton from "@/components/ui/TableSkeleton";
import { unixToDate } from "@/utils/shared";
import Link from "next/link";
import { Skeleton } from "../../../ui/skeleton";
import useCompanyCategoriesPresenter from "./useCompanyCategoriesPresenter";

const CompanyCategoriesTable = () => {
  const {
    categories,
    isLoading,
    pathName,
    router,
    currentCategory,
    isToggling,
    togglePublished,
    onConfirmDelete,
    setCurrentCategory,
    isModalOpen,
    setIsModalOpen,
  } = useCompanyCategoriesPresenter();

  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">
      <button className="mb-5 flex w-fit justify-center self-end rounded-lg bg-primary p-[13px] font-medium text-white hover:bg-opacity-90">
        <Link href={`${pathName}/create`}>Create category</Link>
      </button>
      <Table>
        <TableHeader>
          <TableRow className="border-none uppercase [&>th]:text-start">
            <TableHead colSpan={100}>Row</TableHead>
            <TableHead colSpan={100}>Title</TableHead>
            <TableHead colSpan={100}>Description</TableHead>
            <TableHead colSpan={100}>Created at</TableHead>
            <TableHead colSpan={100}>Published</TableHead>
            <TableHead colSpan={100}>Actions</TableHead>
          </TableRow>
        </TableHeader>
        {isLoading && <TableSkeleton column={6} />}
        <TableBody>
          <IsVisible condition={!categories}>
            <TableRow>
              <TableCell colSpan={400} className="text-center">
                <h6>No category found</h6>
              </TableCell>
            </TableRow>
          </IsVisible>
          <IsVisible condition={!!categories}>
            {categories?.map((category, index) => {
              return (
                <TableRow key={category.id}>
                  <TableCell colSpan={100}>{index + 1}</TableCell>
                  <TableCell colSpan={100}>{category.name}</TableCell>
                  <TableCell colSpan={100}>{category.description}</TableCell>
                  <TableCell colSpan={100}>
                    {unixToDate(category.created_at)}
                  </TableCell>
                  <TableCell colSpan={100}>
                    <IsVisible condition={isToggling}>
                      <Skeleton className="h-8 bg-neutral-400 dark:bg-dark-4" />
                    </IsVisible>
                    <IsVisible condition={!isToggling}>
                      <Switch
                        withIcon
                        onChange={(e) => {
                          togglePublished(category.id);
                        }}
                        checked={category.published}
                        onToggle={(e) => {
                          console.log(e);
                        }}
                      />
                    </IsVisible>
                  </TableCell>
                  <TableCell className="text-start xl:pr-7.5">
                    <div className="flex items-center justify-start gap-x-3.5">
                      <button
                        className="hover:text-red-500"
                        onClick={() => {
                          setCurrentCategory(category);
                          setIsModalOpen(true);
                        }}
                      >
                        <span className="sr-only">Delete Admin </span>
                        <TrashIcon />
                      </button>
                      <button
                        className="hover:text-primary"
                        onClick={() =>
                          router.push(`${pathName}/edit/${category.id}`)
                        }
                      >
                        <span className="sr-only">Edit Category</span>
                        <PencilSquareIcon />
                      </button>
                    </div>
                  </TableCell>
                </TableRow>
              );
            })}
          </IsVisible>
        </TableBody>
      </Table>
      {isModalOpen && (
        <ConfirmationModal
          isOpen={isModalOpen}
          title={`Deleting ${currentCategory?.name}`}
          message={`Are you sure?`}
          variant={"default"}
          size={"md"}
          confirmText={"Delete"}
          cancelText={"Cancel"}
          onConfirm={() => {
            onConfirmDelete();
          }}
          onCancel={() => setIsModalOpen(false)}
        />
      )}
    </div>
  );
};

export default CompanyCategoriesTable;
