"use client";
import { ExclamationIcon } from "@/assets/icons";
import EmptyListWrapper from "@/components/HOC/EmptyListWrapper";
import { ShowcaseSection } from "@/components/Layouts/showcase-section";
import IsVisible from "@/components/ui/IsVisible";
import Pagination from "@/components/ui/pagination";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import TableSkeleton from "@/components/ui/TableSkeleton";
import { cn } from "@/lib/utils";
import { capitalize, getPaginatedRowNumber, unixToDate } from "@/utils/shared";
import FeedbackListFilters from "./FeedbackListFilters";
import useFeedbackTablePresenter from "./useFeedbackTablePresenter";

interface IProps {
  id: string;
  paramKey: "tender_id" | "company_id" | "customer_id";
}
const FeedbackTable = ({ id, paramKey }: IProps) => {
  const {
    columns,
    feedback,
    isLoading,
    pathName,
    router,
    getShowcaseSectionTitle,
    metadata,
    shouldShowPagination,
    filterRegister,
    handleFilterSubmit,
    search,
    watch,
    clearAllFilters,
    tableSectionRef,
    skeletonTbodyRef,
    dataTbodyRef,
    pagination,
    handlePaginationChange,
    isMutating,
  } = useFeedbackTablePresenter({ id, paramKey });

  return (
    <ShowcaseSection
      title={
        !isLoading &&
        `${capitalize(paramKey.slice(0, -3))}${getShowcaseSectionTitle()}`
      }
      className="flex flex-col rounded-[10px] bg-white px-7.5 pb-4 pt-7.5 capitalize shadow-1 dark:bg-gray-dark dark:shadow-card"
    >
      <FeedbackListFilters
        filterRegister={filterRegister}
        handleFilterSubmit={handleFilterSubmit}
        isMutating={isMutating as number}
        search={search}
        watch={watch}
        onClearAll={clearAllFilters}
      />
      <div ref={tableSectionRef}>
        <Table>
          <TableHeader>
            <TableRow>
              {columns.map((column) => (
                <TableHead className="capitalize" key={column} colSpan={100}>
                  {column}
                </TableHead>
              ))}
            </TableRow>
          </TableHeader>
          {isLoading ? (
            <TableSkeleton ref={skeletonTbodyRef} column={columns.length} />
          ) : (
            <TableBody ref={dataTbodyRef}>
              <EmptyListWrapper
                list={feedback ?? []}
                columns={columns}
                emptyMessage="No feedback were found"
                isLoading={false}
              >
                {(feedback ?? []).map((item, index) => (
                  <TableRow
                    key={item.id}
                    className="odd:bg-gray-2 dark:odd:bg-gray-7"
                  >
                    <TableCell className="text-start" colSpan={100}>
                      {getPaginatedRowNumber({
                        index,
                        page: metadata?.page,
                        limit: metadata?.limit,
                      })}
                    </TableCell>
                    <TableCell className="uppercase" colSpan={100}>
                      {item.feedback_type}
                    </TableCell>
                    <TableCell className="uppercase" colSpan={100}>
                      {unixToDate({ unix: item.updated_at, hasTime: true })}
                    </TableCell>

                    <TableCell className="uppercase" colSpan={100}>
                      {unixToDate({ unix: item.created_at, hasTime: true })}
                    </TableCell>
                    <TableCell
                      className={cn(`text flex gap-2 capitalize`)}
                      colSpan={100}
                    >
                      <button
                        type="button"
                        className="text-gray-40 rounded-full bg-gray-dark bg-opacity-5 hover:text-green-dark dark:bg-gray dark:bg-opacity-5"
                        onClick={() => {
                          router.push(`${pathName}/${item.id}`);
                        }}
                      >
                        <ExclamationIcon />
                      </button>
                    </TableCell>
                  </TableRow>
                ))}
              </EmptyListWrapper>
            </TableBody>
          )}
        </Table>
      </div>
      <IsVisible condition={shouldShowPagination}>
        <Pagination
          currentPage={pagination.currentPage}
          totalPages={pagination.totalPages}
          onPageChange={handlePaginationChange}
        />
      </IsVisible>
    </ShowcaseSection>
  );
};

export default FeedbackTable;
