import { useEffect } from "react";

import { useToastStore, type Toast } from "@/stores/useToastStore";

const DISMISS_AFTER_MS = 3500;

const ToastRow = ({ toast }: { toast: Toast }) => {
    const dismissToast = useToastStore((state) => state.dismissToast);

    useEffect(() => {
        const timer = window.setTimeout(
            () => dismissToast(toast.id),
            DISMISS_AFTER_MS,
        );

        return () => window.clearTimeout(timer);
    }, [dismissToast, toast.id]);

    return (
        <div className={`portal-toast portal-toast--${toast.tone}`}>
            <span>{toast.message}</span>
            <button
                aria-label="Dismiss"
                className="portal-toast__close"
                onClick={() => dismissToast(toast.id)}
                type="button"
            >
                &times;
            </button>
        </div>
    );
};

const Toasts = () => {
    const toasts = useToastStore((state) => state.toasts);

    if (toasts.length === 0) {
        return null;
    }

    return (
        <div aria-live="polite" className="portal-toasts">
            {toasts.map((toast) => (
                <ToastRow key={toast.id} toast={toast} />
            ))}
        </div>
    );
};

export default Toasts;