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

import type { ColumnDef } from "@tanstack/react-table";
import { ExternalLink } from "lucide-react";
import Link from "next/link";
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 TipologiaPosizioneEnum from "~/schemas/public/TipologiaPosizioneEnum";
import type { RichiesteData } from "~/server/controllers/servizio.controller";

type RichiesteTableProps = {
	data: RichiesteData[];
};

export const RichiesteTable = ({ data }: RichiesteTableProps) => {
	const tabledata = data;

	const columns_titles = {
		id: "ID Ordine",
		username: "Utente",
		created_at: "Creato il",
		status: "Status",
		tipo: "Tipo",
		annunci: "Annunci",
		actions: "Azioni",
	};
	const statusOptions = [
		{ label: "Attesa di attivazione", value: "attesa_attivazione" },
		{ label: "Acconto pagato", value: "acconto_pagato" },
		{ label: "Saldo pagato", value: "saldo_pagato" },
		{ label: "Conferma in corso", value: "conferma" },
	];

	const type_options = [
		{ label: "Transitorio", value: TipologiaPosizioneEnum.Transitorio },
		{ label: "Stabile", value: TipologiaPosizioneEnum.Stabile },
	];

	// const [selectedOrdine, setSelectedOrdine] = useState<OrdiniOrdineId | null>(
	// 	null,
	// );

	type Column = (typeof tabledata)[number];

	const columns: ColumnDef<Column>[] = [
		{
			accessorKey: "id",
			cell: () => null,
			enableHiding: false,
			header: () => null,
		},

		{
			accessorKey: "username",
			cell: ({ row }) => {
				return (
					<Link
						aria-label="Visualizza Utente"
						href={`/area-riservata/admin/user-view/ricerca/${row.original.user_id}`}
					>
						<Button size="sm">{row.original.username}</Button>
					</Link>
				);
			},
			enableHiding: false,
			header: ({ column }) => (
				<DataTableColumnHeader
					column={column}
					title={columns_titles.username}
				/>
			),
		},
		{
			accessorKey: "created_at",
			cell: ({ row }) => {
				const date = row.getValue("created_at");
				return new Date(date as Date).toLocaleDateString();
			},
			enableHiding: false,
			header: ({ column }) => (
				<DataTableColumnHeader
					column={column}
					title={columns_titles.created_at}
				/>
			),
			sortingFn: "datetime",
		},
		{
			accessorKey: "tipologia",
			cell: ({ row }) => {
				return row.original.tipologia.toString();
			},
			filterFn: (row, id, value) => {
				return value.includes(row.getValue(id));
			},
			header: ({ column }) => (
				<DataTableColumnHeader column={column} title={columns_titles.tipo} />
			),
		},

		{
			accessorKey: "status",
			cell: ({ row }) => {
				const annunci = row.original.annunci_servizio;

				const awaitingConferma = annunci.some(
					(a) => a.user_confirmed_at !== null && !a.hasConfermaAdmin,
				);
				if (awaitingConferma) {
					return "Conferma in corso";
				}

				if (row.original.isOkSaldo) {
					return "Saldo pagato";
				}
				if (row.original.isOkAcconto) {
					return "Acconto pagato";
				}
				if (!row.original.onboardOk) {
					return "Attesa di attivazione";
				}
			},

			filterFn: (row, id, value) => {
				return value.includes(row.getValue(id));
			},
			header: ({ column }) => (
				<DataTableColumnHeader column={column} title={columns_titles.status} />
			),
		},
		{
			accessorKey: "annunci_servizio",
			cell: ({ row }) => {
				const annunci = row.original.annunci_servizio;
				return <span>{annunci.length}</span>;
			},
			header: ({ column }) => (
				<DataTableColumnHeader column={column} title={columns_titles.annunci} />
			),
			enableSorting: false,
		},
		{
			cell: () => {
				return (
					<Button
						aria-label="Apri Dettagli Ordine"
						//onClick={() => {}}
						size="sm"
						variant="outline"
					>
						<ExternalLink className="size-5" />
					</Button>
				);
			},
			enableHiding: false,
			id: "actions",
		},
	];

	const searchFiltro: SearchFiltro = {
		columnName: "id",
		placeholder: "Cerca ordine...",
	};

	const pinnedFiltri: PinnedFiltro[] = [
		{
			columnName: "status",

			options: statusOptions,
			title: "Stato Ordine",
		},
		{
			columnName: "tipo",
			options: type_options,
			title: "Tipo Ordine",
		},
	];

	return (
		<div className="mx-auto w-full">
			<DataTable
				columns={columns}
				columns_titles={columns_titles}
				data={tabledata}
				defaultSort={[{ desc: true, id: "created_at" }]}
				pinnedFiltri={pinnedFiltri}
				searchColumn={searchFiltro}
			/>

			{/* <AdminWrapperOrdiniModal
					ordineId={selectedOrdine}
					setSelected={setSelectedOrdine}
				/>
			  */}
		</div>
	);
};