infoalloggi-monorepo/apps/infoalloggi/src/components/tables/banners-table.tsx

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

	const tabledata = data.map((row) => {
		return {
			actions: "Azioni",
			color: row.color,
			cta_href: row.cta_href,
			cta_icon: row.cta_icon,
			cta_text: row.cta_text,
			has_cta: row.has_cta,
			hide_duration: row.hide_duration,
			idbanner: row.idbanner,
			is_active: row.is_active,
			is_unskippable: row.is_unskippable,
			show_private: row.show_private,
			show_public: row.show_public,
			testo: row.testo,
			titolo: row.titolo,
		};
	});

	const columns_titles = {
		actions: "Azioni",
		color: "Colore",
		cta_href: "Indirizzo",
		cta_icon: "Icona",
		cta_text: "Testo",
		has_cta: "Ha link",
		hide_duration: "Durata",
		idbanner: "Codice",
		is_active: "Attivo",
		is_unskippable: "Non saltabile",
		show_private: "A. Riservata",
		show_public: "Pubblico",
		testo: "Testo",
		titolo: "Titolo",
	};
	type Column = (typeof tabledata)[number];

	const columns: ColumnDef<Column>[] = [
		{
			accessorKey: "idbanner",
			header: ({ column }) => (
				<DataTableColumnHeader
					column={column}
					title={columns_titles.idbanner}
				/>
			),
		},
		{
			accessorKey: "titolo",
			header: ({ column }) => (
				<DataTableColumnHeader column={column} title={columns_titles.titolo} />
			),
		},
		{
			accessorKey: "testo",
			header: ({ column }) => (
				<DataTableColumnHeader column={column} title={columns_titles.testo} />
			),
		},
		{
			accessorKey: "is_unskippable",
			cell: ({ row }) => {
				const data = row.original;
				return data.is_unskippable ? "Vero" : "Falso";
			},
			header: ({ column }) => (
				<DataTableColumnHeader
					column={column}
					title={columns_titles.is_unskippable}
				/>
			),
		},
		{
			accessorKey: "has_cta",
			cell: ({ row }) => {
				const data = row.original;
				return data.has_cta ? "Vero" : "Falso";
			},
			header: ({ column }) => (
				<DataTableColumnHeader column={column} title={columns_titles.has_cta} />
			),
		},
		{
			accessorKey: "hide_duration",
			header: ({ column }) => (
				<DataTableColumnHeader
					column={column}
					title={columns_titles.hide_duration}
				/>
			),
		},
		{
			accessorKey: "cta_href",
			header: ({ column }) => (
				<DataTableColumnHeader
					column={column}
					title={columns_titles.cta_href}
				/>
			),
		},
		{
			accessorKey: "cta_icon",
			header: ({ column }) => (
				<DataTableColumnHeader
					column={column}
					title={columns_titles.cta_icon}
				/>
			),
		},
		{
			accessorKey: "cta_text",
			header: ({ column }) => (
				<DataTableColumnHeader
					column={column}
					title={columns_titles.cta_text}
				/>
			),
		},
		{
			accessorKey: "color",
			header: ({ column }) => (
				<DataTableColumnHeader column={column} title={columns_titles.color} />
			),
		},
		{
			accessorKey: "is_active",
			cell: ({ row }) => {
				const data = row.original;
				return data.is_active ? "Vero" : "Falso";
			},
			header: ({ column }) => (
				<DataTableColumnHeader
					column={column}
					title={columns_titles.is_active}
				/>
			),
		},
		{
			accessorKey: "show_public",
			cell: ({ row }) => {
				const data = row.original;
				return data.show_public ? "Vero" : "Falso";
			},
			header: ({ column }) => (
				<DataTableColumnHeader
					column={column}
					title={columns_titles.show_public}
				/>
			),
		},
		{
			accessorKey: "show_private",
			cell: ({ row }) => {
				const data = row.original;
				return data.show_private ? "Vero" : "Falso";
			},
			header: ({ column }) => (
				<DataTableColumnHeader
					column={column}
					title={columns_titles.show_private}
				/>
			),
		},

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

	const searchFiltro: SearchFiltro = {
		columnName: "idbanner",
		placeholder: "Filtra codice...",
	};
	return (
		<div className="mx-auto w-full px-2 py-10">
			<DataTable
				columns={columns}
				columns_titles={columns_titles}
				data={tabledata}
				defaultColumnVisibility={{
					actions: true,
					color: false,
					cta_href: false,
					cta_icon: false,
					cta_text: false,
					has_cta: true,
					hide_duration: false,
					idbanner: true,
					is_active: true,
					is_unskippable: true,
					show_private: true,
					show_public: true,
					testo: true,

					titolo: true,
				}}
				defaultSort={[{ desc: true, id: "idbanner" }]}
				pinnedFiltri={undefined}
				searchColumn={searchFiltro}
			/>
		</div>
	);
};