import { useState } from "react";
import toast from "react-hot-toast";
import { FormNewServizio, type FormValues } from "~/forms/FormNewServizio";
import type { Servizio } from "~/schemas/public/Servizio";
import type { UsersId } from "~/schemas/public/Users";
import { api } from "~/utils/api";
import { Button } from "../ui/button";
import {
	Dialog,
	DialogContent,
	DialogDescription,
	DialogHeader,
	DialogTitle,
	DialogTrigger,
} from "../ui/dialog";

export const ServiziHeader = ({ userId }: { userId: UsersId }) => {
	const [open, setOpen] = useState(false);
	const [editData, setEditData] = useState<Servizio | undefined>(undefined);

	return (
		<div className="flex w-full flex-wrap items-center justify-between gap-2">
			<h3 className="font-semibold text-xl">Servizi cliente</h3>
			<NewServizioModal
				editData={editData}
				open={open}
				setEditData={setEditData}
				setOpen={setOpen}
				userId={userId}
			/>
		</div>
	);
};

const NewServizioModal = ({
	userId,
	editData,

	setEditData,
	open,
	setOpen,
}: {
	userId: UsersId;
	editData: Servizio | undefined;
	setEditData: (data: Servizio | undefined) => void;
	open: boolean;
	setOpen: (open: boolean) => void;
}) => {
	const utils = api.useUtils();

	const { mutate: add } = api.servizio.addServizio.useMutation({
		onError: (error) => {
			toast.error(error.message);
		},
		onSuccess: async () => {
			toast.success("Servizio creato con successo");
			await utils.servizio.getUserServizi.invalidate();
			await utils.servizio.getAllServizioAnnunci.invalidate({ userId });
			
			setEditData(undefined);
			setOpen(false);
		},
	});

	const { mutate: update } = api.servizio.updateServizio.useMutation({
		onError: (error) => {
			toast.error(error.message);
		},
		onSuccess: async (data) => {
			toast.success("Servizio modificato con successo");
			await utils.servizio.getUserServizi.invalidate();
			await utils.servizio.getAllServizioAnnunci.invalidate({ userId });
			await utils.servizio.getServizioData.invalidate({ servizioId: data.servizio_id });
			await utils.servizio.getServizio.invalidate({
				servizioId: data.servizio_id,
			});
			await utils.servizio.getCompatibileAnnunci.invalidate({
				servizioId: data.servizio_id,
			});
			await utils.servizio.getPacksSolution.invalidate({
				servizioId: data.servizio_id,
			});
			setEditData(undefined);
			setOpen(false);
		},
	});
	function onSubmit(fields: FormValues) {
		if (editData) {
			update({
				data: {
					...fields,
				},
				servizioId: editData.servizio_id,
			});
		} else {
			add({ data: { ...fields, user_id: userId } });
		}
	}
	return (
		<Dialog onOpenChange={setOpen} open={open}>
			<DialogTrigger asChild>
				<Button
					onClick={() => {
						setEditData(undefined);
						setOpen(true);
					}}
					variant="outline"
				>
					Nuovo Servizio
				</Button>
			</DialogTrigger>
			<DialogContent className="max-h-[80%] w-full overflow-auto p-4 sm:max-w-5xl">
				<DialogHeader>
					<DialogTitle>Creazione Servizio</DialogTitle>
					<DialogDescription className="sr-only">desc</DialogDescription>
				</DialogHeader>
				<div className="overflow-y-auto">
					<FormNewServizio
						initialData={editData}
						isLimited={false}
						onSubmit={onSubmit}
					/>
				</div>
			</DialogContent>
		</Dialog>
	);
};