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

"use client";

import { format } from "date-fns";
import { Plus } from "lucide-react";
import { useState } from "react";
import {
	KanbanBoard,
	KanbanCard,
	KanbanCards,
	KanbanHeader,
	KanbanProvider,
} from "~/components/ui/kanban";
import { usePotenziali } from "~/providers/PotenzialiProvider";
import type { PotenzialiGroupsId } from "~/schemas/public/PotenzialiGroups";
import type { PotenzialeData } from "~/server/services/potenziali.service";
import {
	Credenza,
	CredenzaBody,
	CredenzaClose,
	CredenzaContent,
	CredenzaDescription,
	CredenzaFooter,
	CredenzaHeader,
	CredenzaTitle,
	CredenzaTrigger,
} from "../custom_ui/credenza";
import Input from "../custom_ui/input";
import { Textarea } from "../custom_ui/textarea";
import { Button } from "../ui/button";
import { Label } from "../ui/label";
import { UserAvatar } from "../user_avatar";

export const Potenziali = () => {
	const { data, columns, setData, updateCall, setEditing, editingItem } =
		usePotenziali();
	return (
		<>
			<KanbanProvider
				className="w-max"
				columns={columns}
				data={data}
				onDataChange={setData}
				onDragEnd={() => {
					updateCall();
				}}
			>
				{(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>

								<NewCard columnId={column.id} />
							</div>
						</KanbanHeader>
						<KanbanCards className="w-68" id={column.id}>
							{(data: PotenzialeData) => (
								<KanbanCard
									cardOnClick={() => {
										setEditing(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.userid && (
											<UserAvatar
												className="size-6 shrink-0 text-sm"
												userId={data.userid}
												username={data.username || "Utente"}
											/>
										)}
									</div>
									<p className="mt-2 text-muted-foreground text-xs">
										{format(data.created_at, "dd/MM/yyyy HH:mm")}
									</p>
								</KanbanCard>
							)}
						</KanbanCards>
					</KanbanBoard>
				)}
			</KanbanProvider>
			<Credenza
				onOpenChange={(v) => {
					if (!v) {
						setEditing(null);
					}
				}}
				open={!!editingItem}
			>
				<EditingContent />
			</Credenza>
		</>
	);
};

export const NewColumn = () => {
	const [newColumnName, setNewColumnName] = useState("");
	const { addColumn } = usePotenziali();
	return (
		<Credenza>
			<CredenzaTrigger asChild>
				<Button>Nuova colonna</Button>
			</CredenzaTrigger>
			<CredenzaContent className="max-h-[90vh]">
				<CredenzaHeader>
					<CredenzaTitle className="text-center font-semibold text-2xl">
						Nuova colonna
					</CredenzaTitle>
					<CredenzaDescription className="sr-only">desc</CredenzaDescription>
				</CredenzaHeader>
				<CredenzaBody className="flex max-h-[80vh] flex-col gap-4 overflow-auto p-2">
					<Label htmlFor="titolo">Titolo</Label>

					<Input
						defaultValue={newColumnName}
						id="titolo"
						onChange={(e) => setNewColumnName(e.target.value)}
						type="string"
					/>
					<Button
						disabled={!newColumnName.length}
						onClick={() => {
							addColumn(newColumnName);
							setNewColumnName("");
						}}
					>
						Aggiungi
					</Button>
				</CredenzaBody>
			</CredenzaContent>
		</Credenza>
	);
};

export const NewCard = ({ columnId }: { columnId: PotenzialiGroupsId }) => {
	const [newItemName, setNewItemName] = useState("");
	const [newItemDescrizione, setNewItemDescrizione] = useState("");
	const { addItem } = usePotenziali();
	const [open, setOpen] = useState(false);
	const handleAddItem = () => {
		addItem({
			name: newItemName,
			descrizione: newItemDescrizione,
			potenziali_group_id: columnId,
		});
		setNewItemName("");
		setNewItemDescrizione("");
		setOpen(false);
	};
	return (
		<Credenza onOpenChange={setOpen} open={open}>
			<CredenzaTrigger asChild>
				<Button className="ml-auto" size="sm">
					<Plus className="size-4" />
				</Button>
			</CredenzaTrigger>
			<CredenzaContent className="max-h-[90vh]">
				<CredenzaHeader>
					<CredenzaTitle className="text-center font-semibold text-2xl">
						Nuova colonna
					</CredenzaTitle>
					<CredenzaDescription className="sr-only">desc</CredenzaDescription>
				</CredenzaHeader>
				<CredenzaBody className="flex max-h-[80vh] flex-col gap-4 overflow-auto p-2">
					<Label htmlFor="titolo">Titolo</Label>

					<Input
						id="titolo"
						onChange={(e) => setNewItemName(e.target.value)}
						type="string"
						value={newItemName}
					/>
					<Label htmlFor="descrizione">Descrizione</Label>
					<Textarea
						className="min-h-64"
						id="descrizione"
						onChange={(e) => setNewItemDescrizione(e.target.value)}
						placeholder=""
						value={newItemDescrizione}
					/>
				</CredenzaBody>
				<CredenzaFooter>
					<Button disabled={!newItemName.length} onClick={handleAddItem}>
						Aggiungi
					</Button>
					<CredenzaClose>Chiudi</CredenzaClose>
				</CredenzaFooter>
			</CredenzaContent>
		</Credenza>
	);
};

const EditingContent = () => {
	const { editingItem, updateItem } = usePotenziali();

	const [state, setState] = useState<PotenzialeData | null>(editingItem);
	const [hasChanges, setHasChanges] = useState(false);
	if (!state) return null;

	return (
		<CredenzaContent className="max-h-[90vh]">
			<CredenzaHeader>
				<CredenzaTitle className="text-center font-semibold text-2xl">
					Modifica {state.name}
				</CredenzaTitle>
				<CredenzaDescription className="sr-only">desc</CredenzaDescription>
			</CredenzaHeader>
			<CredenzaBody className="flex max-h-[80vh] flex-col gap-4 overflow-auto p-2">
				<Label htmlFor="titolo">Titolo</Label>

				<Input
					id="titolo"
					onChange={(e) => {
						setState((prev) => prev && { ...prev, name: e.target.value });
						setHasChanges(true);
					}}
					type="string"
					value={state.name}
				/>
				<Label htmlFor="descrizione">Descrizione</Label>
				<Textarea
					className="min-h-64"
					id="descrizione"
					onChange={(e) => {
						setState(
							(prev) => prev && { ...prev, descrizione: e.target.value },
						);
						setHasChanges(true);
					}}
					placeholder=""
					value={state.descrizione || undefined}
				/>
			</CredenzaBody>
			<CredenzaFooter>
				<Button
					disabled={!hasChanges || !state}
					onClick={() => {
						updateItem(state);
					}}
					type="button"
				>
					Salva
				</Button>
				<CredenzaClose>Chiudi</CredenzaClose>
			</CredenzaFooter>
		</CredenzaContent>
	);
};