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

export const PrezzarioTable = ({
	data,
	setOpenEdit,
	setEditData,
}: {
	data: Prezziario[];
	setOpenEdit: (status: boolean) => void;
	setEditData: (data: Prezziario | null) => void;
}) => {
	const tabledata = data;

	const tipologia_options = Object.values(OrderTypeEnum).map((value) => ({
		label: value,
		value: value,
	}));

	const cat_options = Object.values(TipologiaPosizioneEnum).map((value) => ({
		label: value,
		value: value,
	}));

	const columns_titles = {
		actions: "Azioni",
		categoria: "Categoria",
		id: "Codice",
		nome: "Nome",
		prezzo: "Prezzo",
		sconto: "Sconto",
		tipologia: "Tipo",
	};
	type Column = (typeof tabledata)[number];

	const columns: ColumnDef<Column>[] = [
		{
			accessorKey: "idprezziario",
			enableHiding: false,
			header: ({ column }) => (
				<DataTableColumnHeader column={column} title={columns_titles.id} />
			),
		},
		{
			accessorKey: "nome",
			cell: ({ row }) => {
				return (
					<div className={cn(!row.original.isActive && "line-through")}>
						{row.original.nome_it}
					</div>
				);
			},
			header: ({ column }) => (
				<DataTableColumnHeader column={column} title={columns_titles.nome} />
			),
		},
		{
			accessorKey: "service_type",

			header: ({ column }) => (
				<DataTableColumnHeader
					column={column}
					title={columns_titles.categoria}
				/>
			),
		},

		{
			accessorKey: "order_type",

			header: ({ column }) => (
				<DataTableColumnHeader
					column={column}
					title={columns_titles.tipologia}
				/>
			),
		},
		{
			accessorKey: "prezzo",
			cell: ({ row }) => {
				return <div>{formatCurrency(row.original.prezzo_cent / 100)}</div>;
			},
			header: ({ column }) => (
				<DataTableColumnHeader column={column} title={columns_titles.prezzo} />
			),
		},
		{
			accessorKey: "sconto",
			cell: ({ row }) => {
				if (row.original.sconto === 0) {
					return (
						<Badge variant="secondary">
							<CircleSlash className="size-4" />
						</Badge>
					);
				}
				return <Badge>{row.original.sconto}%</Badge>;
			},
			header: ({ column }) => (
				<DataTableColumnHeader column={column} title={columns_titles.sconto} />
			),
			enableSorting: false,
		},
		{
			accessorKey: "actions",
			cell: ({ row }) => {
				return (
					<Button
						aria-label="Modifica Prezziario"
						onClick={() => {
							setEditData(row.original);
							setOpenEdit(true);
						}}
						variant="ghost"
					>
						<Cog className="text-muted-foreground" />
					</Button>
				);
			},
			enableHiding: false,
			enableSorting: false,
			header: ({ column }) => (
				<DataTableColumnHeader column={column} title={columns_titles.actions} />
			),
		},
	];
	const pinnedFiltri: PinnedFiltro[] = [
		{
			columnName: "service_type",
			options: cat_options,
			title: "Categoria",
		},
		{
			columnName: "order_type",
			options: tipologia_options,
			title: "Tipologia",
		},
	];
	const searchFiltro: SearchFiltro = {
		columnName: "idprezziario",
		placeholder: "Filtra codice...",
	};
	return (
		<div className="mx-auto w-full px-2 py-10">
			<DataTable
				columns={columns}
				columns_titles={columns_titles}
				data={tabledata}
				defaultSort={[{ desc: false, id: "idprezziario" }]}
				pinnedFiltri={pinnedFiltri}
				searchColumn={searchFiltro}
			/>
		</div>
	);
};
