import { NotificationPayload, ValidationFailed, ValidationSuccess } from "@repo/db";
import { BaseNotification } from "_components/customToasts/BaseNotification";
import { MapStore, useMapStore } 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);
		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="text-red-500 font-bold">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="text-green-600 font-bold">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>
		);
	}
};