'use client';

import { cn } from "@/lib/utils";
import { useState } from "react";
import { RxCross2 } from "react-icons/rx";


type position = 'top-right' | 'top-left' | 'bottom-left' | 'bottom-right';
type type = 'success' | 'error' | 'warning' | 'default' | 'info';

interface ToastProps {
    id: number;
    title: string;
    description?: string;
    type: type;
    position: position;
    onClose: (id: number) => void;
    duration: number;
    progress: number;
    handlePauseNotification: (id: number) => void;
    preventProgress: boolean;
    handleResumeNotification: (id: number) => void;
};

const TYPE_CLASSES: Record<type, string> = {
    'default': 'text-white bg-neutral-800',
    'success': 'text-white bg-lime-600',
    'error': 'text-white bg-destructive',
    'warning': 'text-white bg-orange-500',
    'info': 'text-white bg-sky-500'
}

const preventReduceMotion = 
    typeof window !== 'undefined' &&
    window.matchMedia('(prefers-reduced-motion: reduce').matches;

const ToastNotification = ({id, title, description, onClose, type='default', position='top-right', progress, duration, handlePauseNotification, preventProgress, handleResumeNotification } : ToastProps) => {

    const [exiting, setExiting] = useState(false);
    
    return (
        <div 
            role="status"
            onMouseEnter={() => handlePauseNotification(id)}
            onMouseLeave={() => handleResumeNotification(id)}
            onAnimationEnd={(e) => {
                if (e.animationName === 'toastExitingAnimation') {
                    onClose(id);
                }
            }}
            className={cn('relative rounded-md overflow-hidden', 
                !exiting && 'starting:-translate-x-full translate-x-0 transition-transform duration-300 ease-out motion-reduce:starting:translate-x-0 motion-reduce:transition-none',
                exiting && 'animate-[toastExitingAnimation_300ms_ease-out_forwards] motion-reduce:animate-none'
            )}
        >
            <div 
                data-type={type} 
                className={cn(
                    TYPE_CLASSES[type],
                    "_z-[100] min-w-[300px] relative overflow-hidden flex gap-2 p-1 rounded-sm"
                )}
            >
                <div className="w-[90%] flex items-center gap-2">
                    <div className="w-full flex flex-col gap-2 p-2">
                        <span className="text-sm">{title}</span>
                        { !!description && <span className="text-sm">{description}</span>}
                    </div>
                </div>
                {(!!onClose) && (
                    <button 
                        type="button"
                        className="absolute top-[10px] right-[10px] cursor-pointer" 
                        onClick={() => {
                            if (preventReduceMotion) onClose(id);
                            else setExiting(true);
                        }} 
                        aria-label="Dismiss Notification"
                    >
                        <RxCross2/>
                    </button>
                )}
               <span
                    className="absolute bottom-0 left-0 bg-green-800 h-1 w-full origin-left transitino-[width] duration-120 ease-linear motion-reduce:hidden"
                    style={{ transform: `scaleX(${progress / 100})` }}
                />
            </div>

        </div>
    )
}


export default ToastNotification;