import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { removeToast } from '../features/toast/toastSlice';

const TOAST_DURATION = 3000;

// ----------------------------------------------------
// Helper Functions
// ----------------------------------------------------

const getColors = (type) => {
    switch (type) {
        case 'success':
            return 'alert-success';
        case 'error':
            return 'alert-error';
        case 'warning':
            return 'alert-warning';
        case 'info':
            return 'alert-info';
        default:
            return 'alert-info';
    }
};

const getIcon = (type) => {
    switch (type) {
        case 'success':
            return (
                <svg
                    xmlns="http://www.w3.org/2000/svg"
                    className="stroke-current shrink-0 h-6 w-6"
                    fill="none"
                    viewBox="0 0 24 24"
                >
                    <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth="2"
                        d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
                    />
                </svg>
            );
        case 'error':
            return (
                <svg
                    xmlns="http://www.w3.org/2000/svg"
                    className="stroke-current shrink-0 h-6 w-6"
                    fill="none"
                    viewBox="0 0 24 24"
                >
                    <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth="2"
                        d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
                    />
                </svg>
            );
        case 'warning':
            return (
                <svg
                    xmlns="http://www.w3.org/2000/svg"
                    className="stroke-current shrink-0 h-6 w-6"
                    fill="none"
                    viewBox="0 0 24 24"
                >
                    <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth="2"
                        d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667
              1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464
              0L3.332 16c-.77 1.333.192 3 1.732 3z"
                    />
                </svg>
            );
        case 'info':
            return (
                <svg
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                    className="stroke-current shrink-0 w-6 h-6"
                >
                    <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth="2"
                        d="M13 16h-1v-4h-1m1-4h.01M21
              12a9 9 0 11-18 0 9 9 0 0118 0z"
                    />
                </svg>
            );
        default:
            return null;
    }
};

// ----------------------------------------------------
// ToastNotification Component
// ----------------------------------------------------

export default function ToastNotification() {
    const dispatch = useDispatch();
    const queue = useSelector((state) => state.toast.queue);

    useEffect(() => {
        if (queue.length > 0) {
            queue.forEach((toast) => {
                if (!toast.timerId) {
                    setTimeout(() => {
                        dispatch(removeToast({ id: toast.id }));
                    }, TOAST_DURATION);
                }
            });
        }
    }, [queue, dispatch]);

    return (
        <div className="fixed top-0 right-0 z-[100] p-4 space-y-3 pointer-events-none">
            {queue.map((toast) => (
                <div
                    key={toast.id}
                    className={`alert ${getColors(toast.type)} shadow-xl transition-all duration-500 ease-out transform translate-x-0 opacity-100 max-w-sm`}
                    style={{ pointerEvents: 'auto' }}
                    onClick={() => dispatch(removeToast({ id: toast.id }))}
                >
                    <div className="flex items-center space-x-2 text-white">
                        {getIcon(toast.type)}
                        <span>{toast.message}</span>
                    </div>
                </div>
            ))}
        </div>
    );
}
