import { ValidationFailed, ValidationSuccess } from "@repo/db";
import { BaseNotification } from "_components/customToasts/BaseNotification";
import { MapStore } from "_store/mapStore";
import { Check, Cross } from "lucide-react";
import toast, { Toast } from "react-hot-toast";

export const HPGnotificationToast = ({
	event,
	t,
	mapStore,
}: {
	event: ValidationFailed | ValidationSuccess;
	t: Toast;
	mapStore: MapStore;
}) => {
	const handleClick = () => {
		toast.dismiss(t.id);

		if (mapStore.userSettings.settingsAutoCloseMapPopup) {
			mapStore.setOpenMissionMarker({
				open: [{ id: event.data.mission.id, tab: "home" }],
				close: mapStore.openMissionMarker?.map((m) => m.id) || [],
			});
		} else {
			mapStore.setOpenMissionMarker({
				open: [{ id: event.data.mission.id, tab: "home" }],
				close: [],
			});
		}

		mapStore.setMap({
			center: [event.data.mission.addressLat, event.data.mission.addressLng],
			zoom: 14,
		});
	};

	if (event.status === "failed") {
		return (
			<BaseNotification icon={<Cross />} className="flex flex-row">
				<div className="flex-1">
					<h1 className="font-bold text-red-500">HPG validierung fehlgeschlagen</h1>
					<p>{event.message}</p>
				</div>
				<div className="ml-11">
					<button className="btn" onClick={handleClick}>
						anzeigen
					</button>
				</div>
			</BaseNotification>
		);
	} else {
		return (
			<BaseNotification icon={<Check />} className="flex flex-row">
				<div className="flex-1">
					<h1 className="font-bold text-green-600">HPG validierung erfolgreich</h1>
					<p className="text-sm">{event.message}</p>
				</div>
				<div className="ml-11">
					<button className="btn" onClick={handleClick}>
						anzeigen
					</button>
				</div>
			</BaseNotification>
		);
	}
};