import type { ColumnDef } from "@tanstack/react-table";
import { DataTableColumnHeader } from "~/components/custom_ui/dataTable-header";
import { Cog } from "lucide-react";
import { DataTable } from "~/components/custom_ui/data-table";
import type { SearchFiltro } from "~/components/custom_ui/dataTable-toolbar";
import { Button } from "~/components/ui/button";
import type { Etichette } from "~/schemas/public/Etichette";
import { Etichetta } from "~/components/etichette";
export const EtichetteTable = (props: {
  data: Etichette[];
  setOpenEdit: (status: boolean) => void;
  setEditData: (data: Etichette | null) => void;
}) => {
  const { data, setOpenEdit, setEditData } = props;

  const tabledata = data.map((row) => {
    return {
      id: row.id_etichetta,
      title: row.title,
      colore: row.color_hex,

      actions: "Azioni",
    };
  });

  const columns_titles = {
    id: "Id",
    etichetta: "Etichetta",
    actions: "Azioni",
  };
  type Column = (typeof tabledata)[number];

  const columns: ColumnDef<Column>[] = [
    {
      header: ({ column }) => (
        <DataTableColumnHeader column={column} title={columns_titles.id} />
      ),
      accessorKey: "id",
      enableHiding: false,
    },
    {
      header: ({ column }) => (
        <DataTableColumnHeader
          column={column}
          title={columns_titles.etichetta}
        />
      ),
      accessorKey: "title",
      cell: ({ row }) => {
        const data = row.original;
        return (
          <Etichetta
            title={data.title}
            color_hex={data.colore}
            className="text-base"
          />
        );
      },

      enableHiding: false,
    },

    {
      header: ({ column }) => (
        <DataTableColumnHeader column={column} title={columns_titles.actions} />
      ),
      cell: ({ row }) => {
        const data = row.original;
        return (
          <Button
            aria-label="Modifica Etichetta"
            variant="outline"
            onClick={() => {
              setEditData({
                id_etichetta: data.id,
                title: data.title,
                color_hex: data.colore,
              });
              setOpenEdit(true);
            }}
          >
            <div className="flex items-center gap-2">
              <Cog /> Modifica
            </div>
          </Button>
        );
      },
      accessorKey: "actions",
      enableHiding: false,
      enableSorting: false,
    },
  ];

  const searchFiltro: SearchFiltro = {
    columnName: "title",
    placeholder: "Filtra codice...",
  };
  return (
    <div className="mx-auto w-full px-2 py-10">
      <DataTable
        columns={columns}
        data={tabledata}
        pinnedFiltri={undefined}
        searchColumn={searchFiltro}
        columns_titles={columns_titles}
        defaultSort={[{ desc: true, id: "id" }]}
      />
    </div>
  );
};