import { API_ENDPOINTS, BASE_URL } from "@/config/api";
import { useQueryData } from "@/hooks/useQueryData";
import { createFileRoute } from "@tanstack/react-router";
import type { ColumnDef } from "@tanstack/react-table";
import { useState } from "react";

type Blacklist = {
  id: number;
  appName: string;
  processName: string;
  createdAt?: string;
  updatedAt?: string;
  createdBy?: string;
};

export const Route = createFileRoute("/_authenticated/blacklist/")({
  head: () => ({ meta: [{ title: "Danh sách các ứng dụng bị chặn" }] }),
  component: BlacklistComponent,
});

function BlacklistComponent() {
  const { data, isLoading } = useQueryData({
    queryKey: ["blacklist"],
    url: BASE_URL + API_ENDPOINTS.APP_VERSION.GET_VERSION,
  });

  const blacklist: Blacklist[] = Array.isArray(data)
    ? (data as Blacklist[])
    : [];

  const columns : ColumnDef<Blacklist>[] = 
  [
    {
        accessorKey: "id",
        header: "ID",
        cell: info => info.getValue(), 
    },
    {
        accessorKey: "appName",
        header: "Tên ứng dụng",
        cell: info => info.getValue(), 
    },
    {
        accessorKey: "processName",
        header: "Tên tiến trình",
        cell: info => info.getValue(), 
    },
    {
        accessorKey: "createdAt",
        header: "Ngày tạo",
        cell: info => info.getValue(), 
    },
    {
        accessorKey: "updatedAt",
        header: "Ngày cập nhật",
        cell: info => info.getValue(), 
    },
    {
        accessorKey: "createdBy",
        header: "Người tạo",
        cell: info => info.getValue(), 
    },
  ]

  return <div>Hello "/_authenticated/blacklist/"!</div>;
}