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

import { Package } from "lucide-react";
import { useState } from "react";
import { LoadingPage } from "~/components/loading";
import { ServizioContent } from "~/components/servizio/main";
import {
	Collapsible,
	CollapsibleContent,
	CollapsibleTrigger,
} from "~/components/ui/collapsible";
import { ServizioProvider } from "~/providers/ServizioProvider";
import type { UsersId } from "~/schemas/public/Users";
import type { ServizioData } from "~/server/controllers/servizio.controller";
import { api } from "~/utils/api";

export const TabRicerca = ({
	userId,
	isAdmin,
}: {
	userId: UsersId;
	isAdmin: boolean;
}) => {
	const { data, isLoading } = api.servizio.getAllServizioAnnunci.useQuery({
		userId,
	});

	if (isLoading) return <LoadingPage />;
	if (!data || data.length === 0) {
		return (
			<div className="m-4 rounded-md bg-yellow-100 p-4 text-yellow-900">
				Nessun servizio attualmente inserito
			</div>
		);
	}

	return (
		<div className="flex flex-col gap-2">
			{data.map((servizio, idx) => {
				return (
					<Row
						defaultOpen={idx === 0}
						isAdmin={isAdmin}
						key={idx}
						servizio={servizio}
						userId={userId}
					/>
				);
			})}
		</div>
	);
};

const Row = ({
	servizio,
	userId,
	isAdmin,
	defaultOpen = false,
}: {
	servizio: ServizioData;
	userId: UsersId;
	isAdmin: boolean;
	defaultOpen: boolean;
}) => {
	const [isOpen, setIsOpen] = useState(defaultOpen);
	return (
		<ServizioProvider
			isAdmin={isAdmin}
			servizio={servizio}
			servizioId={servizio.servizio_id}
			userId={userId}
		>
			<Collapsible onOpenChange={setIsOpen} open={isOpen}>
				<div className="border-border flex items-center rounded-md border py-2 shadow-sm hover:shadow-md">
					<CollapsibleTrigger className="grid w-full cursor-pointer grid-cols-10 items-center">
						<div className="col-span-2 sm:col-span-1">
							<span className="text-xl">{isOpen ? "👇" : "👉"}</span>
						</div>
						<div className="col-span-6 flex items-center gap-2 font-semibold sm:text-lg">
							<Package className="text-primary size-6" />
							Affitto {servizio.tipologia}
						</div>
						<div className="col-span-2">
							{(() => {
								if (servizio.isInterrotto)
									return <span className="text-red-500">Interrotto</span>;
								if (servizio.isOkAcconto && servizio.decorrenza !== null) {
									return <span className="text-green-500">Attivo</span>;
								}
								return <span className="text-neutral-500">Inattivo</span>;
							})()}
						</div>
						<div className="hidden text-sm sm:col-span-2 sm:contents sm:text-base">
							{servizio.created_at.toLocaleDateString("it", {
								day: "2-digit",
								month: "short",
							})}
						</div>
					</CollapsibleTrigger>
				</div>

				<CollapsibleContent className="data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up mt-2 overflow-hidden transition-all duration-300 ease-in-out">
					<ServizioProvider
						isAdmin={isAdmin}
						servizio={servizio}
						servizioId={servizio.servizio_id}
						userId={userId}
					>
						<ServizioContent />
					</ServizioProvider>
				</CollapsibleContent>
			</Collapsible>
		</ServizioProvider>
	);
};