infoalloggi-monorepo/apps/infoalloggi/src/components/area-riservata/potenziali.tsx

"use client";

import { format } from "date-fns";
import {
	KanbanBoard,
	KanbanCard,
	KanbanCards,
	KanbanHeader,
	KanbanProvider,
} from "~/components/ui/kanban";
import {
	type ElementoPotenziali,
	PotenzialiProvider,
	usePotenziali,
} from "~/providers/PotenzialiProvider";
import type { UsersId } from "~/schemas/public/Users";
import {
	Credenza,
	CredenzaBody,
	CredenzaContent,
	CredenzaDescription,
	CredenzaHeader,
	CredenzaTitle,
} from "../custom_ui/credenza";
import {
	ContextMenu,
	ContextMenuContent,
	ContextMenuItem,
	ContextMenuTrigger,
} from "../ui/context-menu";
import {
	Dialog,
	DialogContent,
	DialogDescription,
	DialogHeader,
	DialogTitle,
} from "../ui/dialog";
import { UserAvatar } from "../user_avatar";

const columns = [
	{ id: "todo", name: "To Do", color: "red" },
	{ id: "inprogress", name: "In Progress", color: "blue" },
	{ id: "done", name: "Done", color: "green" },
];

const SampleData: ElementoPotenziali[] = [
	{
		id: "1",
		name: "Mario Rossi",
		column: "todo",
		descrizione:
			"Single, cerca appartamento in centro da subito, budget 800 euro",
		createdAt: new Date(),
		owner: {
			userId: "019b9a25-eff1-420a-9017-b0add205d7b6" as UsersId,
			username: "Marco Pedone",
		},
	},
	{
		id: "2",
		name: "Luigi Bianchi",
		column: "inprogress",
		descrizione: "Coppia, cerca bilocale in periferia, budget 600 euro",
		createdAt: new Date(),
		owner: null,
	},
	{
		id: "3",
		name: "Giovanni Verdi",
		column: "done",
		descrizione:
			"Famiglia con 2 figli, cerca trilocale vicino a scuole, budget 1000 euro",
		createdAt: new Date(),
		owner: {
			userId: "019b9a25-eff1-420a-9017-b0add205d7b6" as UsersId,
			username: "Marco Pedone",
		},
	},
];

const Potenziali = () => {
	return (
		<PotenzialiProvider data={SampleData}>
			<Kaban />
		</PotenzialiProvider>
	);
};

const Kaban = () => {
	const { data, updateData, setEditingId, editingId } = usePotenziali();

	return (
		<>
			<KanbanProvider
				className="w-max"
				columns={columns}
				data={data}
				onDataChange={updateData}
			>
				{(column) => (
					<KanbanBoard
						className="w-fit overflow-auto"
						id={column.id}
						key={column.id}
					>
						<KanbanHeader>
							<div className="flex items-center gap-2">
								<div
									className="h-2 w-2 rounded-full"
									style={{ backgroundColor: column.color }}
								/>
								<span>{column.name}</span>
							</div>
						</KanbanHeader>
						<KanbanCards className="w-68" id={column.id}>
							{(data: ElementoPotenziali) => (
								<KanbanCard
									cardOnClick={() => {
										setEditingId(data.id);
									}}
									column={column.id}
									id={data.id}
									key={data.id}
									name={data.name}
								>
									<div className="flex items-start justify-between gap-2">
										<div className="flex flex-col gap-1">
											<p className="m-0 flex-1 font-medium text-sm">
												{data.name}
											</p>
											<p className="m-0 text-muted-foreground text-xs">
												{data.descrizione}
											</p>
										</div>
										{data.owner && (
											<UserAvatar
												className="size-6 shrink-0 text-sm"
												userId={data.owner.userId}
												username={data.owner.username}
											/>
										)}
									</div>
									<p className="mt-2 text-muted-foreground text-xs">
										{format(data.createdAt, "dd/MM/yyyy HH:mm")}
									</p>
								</KanbanCard>
							)}
						</KanbanCards>
					</KanbanBoard>
				)}
			</KanbanProvider>
			<Credenza
				onOpenChange={(v) => {
					if (!v) {
						setEditingId(null);
					}
				}}
				open={!!editingId}
			>
				<EditingContent />
			</Credenza>
		</>
	);
};

const EditingContent = () => {
	const { getEditingItem } = usePotenziali();
	const item = getEditingItem();
	if (!item) return null;
	return (
		<CredenzaContent className="max-h-[90vh]">
			<CredenzaHeader>
				<CredenzaTitle className="text-center font-semibold text-2xl">
					Modifica {item.name}
				</CredenzaTitle>
				<CredenzaDescription className="sr-only">desc</CredenzaDescription>
			</CredenzaHeader>
			<CredenzaBody className="flex max-h-[80vh] flex-col gap-4 overflow-auto pb-5">
				<p>Descrizione: {item.descrizione}</p>
				<p>Creato il: {format(item.createdAt, "dd/MM/yyyy HH:mm")}</p>
				<p>Utente Assegnato: {item.owner ? item.owner.username : "Nessuno"}</p>
			</CredenzaBody>
		</CredenzaContent>
	);
};

export default Potenziali;