import type { HTMLAttributes } from "react";
import type { UseQueryResult } from "@tanstack/react-query";
import { useReactTable, type TableOptions } from "@tanstack/react-table";
import { DataTable } from "@common/components";
import { NoData } from "../ui/no-data";
import type { PageableList } from "../model";
import { matchQueryStatus } from "./match-query-status";

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

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

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

  return {
    tableComponent: matchQueryStatus(query, {
      Empty: <NoData />,
      Success: () => {
        return <DataTable table={table} {...dataTableOptions} />;
      },
    }),
    tableInstance: table,
  };
};