"use client";

import type { HTMLAttributes } from "react";

import type { UseQueryResult } from "@tanstack/react-query";
import { type TableOptions, useReactTable } from "@tanstack/react-table";

import type { PageResponse } from "@/shared/model";
import { NoData } from "@/shared/ui/no-data";
import { DataTable, Skeleton } from "@common/components";

import { matchQueryStatus } from "./match-query-status";

interface DataTableOptions<T> {
  variant?: "default" | "secondary" | "line";
  className?: HTMLAttributes<HTMLTableElement>["className"];
  viewPagination?: boolean;
  onRowClick?: (row: T) => void;
}

interface UseDataTableOptions<T> {
  query: UseQueryResult<PageResponse<T>>;
  tableOptions: Omit<TableOptions<T>, "data" | "rowCount">;
  dataTableOptions?: DataTableOptions<T>;
}

export function useDataTable<T>({ query, tableOptions, dataTableOptions }: UseDataTableOptions<T>) {
  const table = useReactTable({
    ...tableOptions,
    data: query.data?.content ?? [],
    rowCount: query.data?.totalElements ?? 0,
  });

  return {
    tableComponent: matchQueryStatus(query, {
      Pending: (
        <div className="flex flex-col gap-2">
          <Skeleton className="h-[4rem]" />
          <Skeleton className="h-[16rem]" />
        </div>
      ),
      Empty: <NoData />,
      Error: (
        <p className="py-6 text-center text-lg text-muted-foreground">
          데이터를 불러오는 중 오류가 발생했습니다.
        </p>
      ),
      Success: () => <DataTable table={table} {...dataTableOptions} />,
    }),
    tableInstance: table,
  };
}