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

import { CircleCheck, CircleSlash, ReceiptText } from "lucide-react";
import Link from "next/link";
import type { Dispatch, SetStateAction } from "react";
import {
	Credenza,
	CredenzaBody,
	CredenzaClose,
	CredenzaContent,
	CredenzaDescription,
	CredenzaFooter,
	CredenzaHeader,
	CredenzaTitle,
} from "~/components/custom_ui/credenza";
import { Button } from "~/components/ui/button";
import { FormEditOrder } from "~/forms/FormEditOrdine";
import { formatCurrency } from "~/lib/utils";
import type { OrdiniOrdineId } from "~/schemas/public/Ordini";
import PaymentStatusEnum from "~/schemas/public/PaymentStatusEnum";
import type { Prezziario } from "~/schemas/public/Prezziario";
import { api } from "~/utils/api";

export const AdminWrapperOrdiniModal = ({
	ordineId,
	setSelected,
}: {
	ordineId: OrdiniOrdineId | null;
	setSelected: Dispatch<SetStateAction<OrdiniOrdineId | null>>;
}) => {
	const { data: prezzi, isLoading } = api.prezziario.getPrezziario.useQuery();
	if (isLoading || !ordineId || !prezzi) return null;
	return (
		<AdminOrdiniModal
			ordineId={ordineId}
			prezzi={prezzi}
			setSelected={setSelected}
		/>
	);
};
const AdminOrdiniModal = ({
	prezzi,
	setSelected,
	ordineId,
}: {
	prezzi: Prezziario[];
	setSelected: Dispatch<SetStateAction<OrdiniOrdineId | null>>;
	ordineId: OrdiniOrdineId;
}) => {
	const { data } = api.servizio.getOrdineById.useQuery({
		ordineId,
	});

	if (!data) return null;

	return (
		<Credenza
			onOpenChange={(b) => {
				if (!b) setSelected(null);
			}}
			open={ordineId !== null}
		>
			<CredenzaContent className="max-h-[90vh] max-w-2xl sm:max-w-4xl">
				<CredenzaHeader>
					<CredenzaTitle>Dettagli Ordine</CredenzaTitle>
					<CredenzaDescription>
						Visualizza i dettagli e i pagamenti associati.
					</CredenzaDescription>
				</CredenzaHeader>
				<CredenzaBody className="max-h-[80vh] space-y-2 overflow-auto pb-5">
					<p>Id Ordine: {data.ordine_id}</p>
					{data.isActive &&
						data.paymentstatus === PaymentStatusEnum.success && (
							<div>
								<Link
									href={`/servizio/ricevuta-cortesia/${data.ordine_id}`}
									target="_blank"
								>
									<Button variant="outline">
										Ricevuta di cortesia <ReceiptText />
									</Button>
								</Link>
							</div>
						)}
					<FormEditOrder
						close={() => setSelected(null)}
						data={data}
						prezziario={prezzi}
					/>
				</CredenzaBody>
			</CredenzaContent>
		</Credenza>
	);
};

export const UserOrdiniModal = ({
	setSelected,
	ordineId,
}: {
	setSelected: (ordineId: OrdiniOrdineId | null) => void;
	ordineId: OrdiniOrdineId;
}) => {
	const { data } = api.servizio.getOrdineById.useQuery({
		ordineId,
	});
	if (!data) return null;

	return (
		<Credenza
			onOpenChange={(b) => {
				if (!b) setSelected(null);
			}}
			open={ordineId !== null}
		>
			<CredenzaContent className="max-h-[90vh] max-w-2xl sm:max-w-4xl">
				<CredenzaHeader>
					<CredenzaTitle>Dettagli Ordine</CredenzaTitle>
					<CredenzaDescription>
						Visualizza i dettagli e i pagamenti associati.
					</CredenzaDescription>
				</CredenzaHeader>
				<CredenzaBody className="max-h-[80vh] space-y-2 overflow-auto pb-5">
					<p>Id Ordine: {data.ordine_id}</p>
					<p>
						Data Ordine: {new Date(data.created_at).toLocaleDateString("it-IT")}
					</p>
					<p>Tipologia: {data.type.toString()}</p>
					<p>Pack ID: {data.packid}</p>
					<p className="flex items-center gap-2">
						Stato:{" "}
						{data.isActive ? (
							<span className="inline-flex items-center gap-1 text-green-500">
								<CircleCheck className="size-5" />
								Attivo
							</span>
						) : (
							<span className="inline-flex items-center gap-1">
								<CircleSlash className="size-5" />
								Non Attivo
							</span>
						)}
					</p>
					<p>
						Importo: {formatCurrency(data.amount_cent / 100)}{" "}
						{data.sconto > 0 && <span>({data.sconto}%)</span>}
					</p>
					{data.isActive &&
						data.paymentstatus === PaymentStatusEnum.success && (
							<div>
								<Link
									href={`/servizio/ricevuta-cortesia/${data.ordine_id}`}
									target="_blank"
								>
									<Button variant="outline">
										Ricevuta di cortesia <ReceiptText />
									</Button>
								</Link>
							</div>
						)}
				</CredenzaBody>
				<CredenzaFooter className="flex w-full sm:justify-end">
					<CredenzaClose asChild>
						<Button variant="ghost">Chiudi</Button>
					</CredenzaClose>
				</CredenzaFooter>
			</CredenzaContent>
		</Credenza>
	);
};