import type { Prezziario } from "~/schemas/public/Prezziario";
import type { ColumnDef } from "@tanstack/react-table";
import { DataTableColumnHeader } from "~/components/custom_ui/dataTable-header";
import { Button } from "~/components/ui/button";
import { CircleSlash, Cog } from "lucide-react";
import type {
  PinnedFiltro,
  SearchFiltro,
} from "~/components/custom_ui/dataTable-toolbar";
import { DataTable } from "~/components/custom_ui/data-table";
import { cn, formatCurrency } from "~/lib/utils";
import { Badge } from "~/components/ui/badge";

export const PrezzarioTable = ({
  data,
  setOpenEdit,
  setEditData,
}: {
  data: Prezziario[];
  setOpenEdit: (status: boolean) => void;
  setEditData: (data: Prezziario | null) => void;
}) => {
  const tabledata = data.map((row) => {
    return {
      id: row.idprezziario,
      nome_it: row.nome_it,
      desc_it: row.desc_it,
      nome_en: row.nome_en,
      desc_en: row.desc_en,
      categoria: [
        row.isAcconto && "acconto",
        row.isSaldo && "saldo",
        row.isConsulenza && "consulenza",
      ].filter(Boolean),
      isTransitorio: row.isTransitorio,
      isStabile: row.isStabile,
      prezzo_cent: row.prezzo_cent,
      testo_condizioni: row.testo_condizioni,
      isAcconto: row.isAcconto,
      isSaldo: row.isSaldo,
      isConsulenza: row.isConsulenza,
      isActive: row.isActive,
      sconto: row.sconto,
      actions: "Azioni",
    };
  });

  const cat_options = [
    { label: "acconto", value: "acconto" },
    { label: "saldo", value: "saldo" },
    { label: "consulenza", value: "consulenza" },
  ];

  const columns_titles = {
    id: "Codice",
    nome: "Nome",
    categoria: "Categoria",
    tipologia: "Tipo",
    prezzo: "Prezzo",
    sconto: "Sconto",
    actions: "Azioni",
  };
  type Column = (typeof tabledata)[number];
  const includesAll = (arr: string[], values: string[]) =>
    values.every((v) => arr.includes(v));
  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.nome} />
      ),
      cell: ({ row }) => {
        return (
          <div className={cn(!row.original.isActive && "line-through")}>
            {row.original.nome_it}
          </div>
        );
      },
      accessorKey: "nome",
    },
    {
      header: ({ column }) => (
        <DataTableColumnHeader
          column={column}
          title={columns_titles.categoria}
        />
      ),
      filterFn: (row, id, value) => {
        return includesAll(row.getValue(id), value as string[]);
      },

      accessorKey: "categoria",
    },

    {
      header: ({ column }) => (
        <DataTableColumnHeader
          column={column}
          title={columns_titles.tipologia}
        />
      ),
      accessorKey: "tipologia",
      filterFn: (row, id, value) => {
        return includesAll(row.getValue(id), value as string[]);
      },
      cell: ({ row }) => {
        return (
          <div>
            {row.original.isTransitorio
              ? row.original.isStabile
                ? "Transitorio/Stabile"
                : "Transitorio"
              : row.original.isStabile
                ? "Stabile"
                : ""}
          </div>
        );
      },
    },
    {
      header: ({ column }) => (
        <DataTableColumnHeader column={column} title={columns_titles.prezzo} />
      ),
      cell: ({ row }) => {
        return <div>{formatCurrency(row.original.prezzo_cent / 100)}</div>;
      },
      accessorKey: "prezzo",
    },
    {
      header: ({ column }) => (
        <DataTableColumnHeader column={column} title={columns_titles.sconto} />
      ),
      cell: ({ row }) => {
        if (row.original.sconto === 0) {
          return (
            <Badge variant="secondary">
              <CircleSlash className="size-4" />
            </Badge>
          );
        }
        return <Badge>{row.original.sconto}%</Badge>;
      },

      accessorKey: "sconto",
    },
    {
      header: ({ column }) => (
        <DataTableColumnHeader column={column} title={columns_titles.actions} />
      ),
      cell: ({ row }) => {
        const rowData = row.original;
        return (
          <Button
            aria-label="Modifica Prezziario"
            variant="ghost"
            onClick={() => {
              setEditData({
                idprezziario: rowData.id,
                nome_it: rowData.nome_it,
                nome_en: rowData.nome_en,
                desc_it: rowData.desc_it,
                desc_en: rowData.desc_en,
                prezzo_cent: rowData.prezzo_cent,
                testo_condizioni: rowData.testo_condizioni,
                isAcconto: rowData.isAcconto,
                isSaldo: rowData.isSaldo,
                isConsulenza: rowData.isConsulenza,
                isActive: rowData.isActive,
                sconto: rowData.sconto,
                isTransitorio: rowData.isTransitorio,
                isStabile: rowData.isStabile,
              });
              setOpenEdit(true);
            }}
          >
            <Cog className="text-neutral-600" />
          </Button>
        );
      },
      accessorKey: "actions",
      enableHiding: false,
      enableSorting: false,
    },
  ];
  const pinnedFiltri: PinnedFiltro[] = [
    {
      title: "Categoria",
      columnName: "categoria",
      options: cat_options,
    },
  ];
  const searchFiltro: SearchFiltro = {
    columnName: "id",
    placeholder: "Filtra codice...",
  };
  return (
    <div className="mx-auto w-full px-2 py-10">
      <DataTable
        columns={columns}
        data={tabledata}
        pinnedFiltri={pinnedFiltri}
        searchColumn={searchFiltro}
        columns_titles={columns_titles}
        defaultSort={[{ desc: false, id: "categoria" }]}
      />
    </div>
  );
};
