"use client"

import { useEffect, useRef, useState } from "react";
import { BiBell } from "react-icons/bi"

const NotificationsButton = () => {
    const [isOpen, setIsOpen] = useState(false);
    const [loading, setLoading] = useState(true);
    const [notifications, setNotifications] = useState<any>([]);
    const dropdownRef = useRef<any>(null);

    const toggleModal = () => {
        setIsOpen(!isOpen);
    };

    const handleClickOutside = (event : any) => {
        if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
            setIsOpen(false);
        }
    };

    useEffect(() => {
        if (isOpen) {
            document.addEventListener('mousedown', handleClickOutside);
        } else {
            document.removeEventListener('mousedown', handleClickOutside);
        }
        return () => {
            document.removeEventListener('mousedown', handleClickOutside);
        };
    }, [isOpen]);

    useEffect(() => {
        const timer = setTimeout(() => {
            setLoading(false);
            setNotifications([
                {
                    avatarURL: "https://via.placeholder.com/50",
                    title: "Notification 1",
                    timestamp: "15/4/24",
                    description: "This is notification 1",
                },
                {
                    avatarURL: "https://via.placeholder.com/50",
                    title: "Notification 2",
                    timestamp: "15/4/24",
                    description: "This is notification 2",
                },
                {
                    avatarURL: "https://via.placeholder.com/50",
                    title: "Notification 3",
                    timestamp: "15/4/24",
                    description: "This is notification 3",
                },
            ]);
        }, 2000);

        return () => clearTimeout(timer);
    }, []);

    return (
        <div className="relative">
            <button onClick={toggleModal} className="p-2 hover:bg-gray-900 rounded-lg">
                <BiBell className="text-xl" />
            </button>
            {isOpen && (
                <div ref={dropdownRef} className="absolute right-0 mt-2 w-80 p-2 bg-[#11131e] border shadow-lg rounded-lg">
                    <h1 className="font-semibold p-2">Notifications</h1>
                    {loading ? (
                        <>
                        <div className="animate-pulse px-6 py-4 flex items-center space-x-4">
                            <div className="w-12 h-12 bg-gray-900 rounded-full"></div>
                            <div className="flex-1">
                                <div className="w-40 h-4 bg-gray-900 rounded mb-2"></div>
                                <div className="w-36 h-3 bg-gray-900 rounded"></div>
                            </div>
                        </div>
                        <div className="animate-pulse px-6 py-4 flex items-center space-x-4">
                            <div className="w-12 h-12 bg-gray-900 rounded-full"></div>
                            <div className="flex-1">
                                <div className="w-40 h-4 bg-gray-900 rounded mb-2"></div>
                                <div className="w-36 h-3 bg-gray-900 rounded"></div>
                            </div>
                        </div>
                        <div className="animate-pulse px-6 py-4 flex items-center space-x-4">
                            <div className="w-12 h-12 bg-gray-900 rounded-full"></div>
                            <div className="flex-1">
                                <div className="w-40 h-4 bg-gray-900 rounded mb-2"></div>
                                <div className="w-36 h-3 bg-gray-900 rounded"></div>
                            </div>
                        </div>
                        </>
                    ) : (
                        notifications.map((notification : any, index : number) => (
                            <div key={index} className="px-4 py-2 flex flex-col">
                                <div className="flex items-center space-x-2">
                                    <img src={notification.avatarURL} alt="Avatar" className="w-8 h-8 rounded-full" />
                                    <div>
                                        <div className="text-sm font-semibold">{notification.title}</div>
                                        <div className="text-xs text-gray-400">{notification.timestamp}</div>
                                    </div>
                                </div>
                                <div className="text-sm">{notification.description}</div>
                            </div>
                        ))                        
                    )}
                </div>
            )}
        </div>
    );
}

export default NotificationsButton