import React, { useState, useEffect, useRef } from 'react';
import './dropdown-menu.scss';
import RightChevron from '../../../assets/images/right-chevron.svg';


interface DropdownItem {
    label: string;
    value: string;
}
interface Props {
    defaultImage: string;
    hoverImage: string;
    title: string;
    items: DropdownItem[];
    onItemClick: (item: string) => void;
}

const DropdownMenu: React.FC<Props> = ({
                                           defaultImage,
                                           hoverImage,
                                           title,
                                           items,
                                           onItemClick,
                                       }) => {
    const [isOpen, setIsOpen] = useState(false);
    const [buttonImage, setButtonImage] = useState(defaultImage);
    const dropdownRef = useRef<HTMLDivElement>(null);

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

    useEffect(() => {
        const handleClick = (event: MouseEvent) => {
            if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
                setIsOpen(false);
            }
        };
        const handleKeyDown = (event: KeyboardEvent) => {
            if (event.key === 'Escape') {
                setIsOpen(false);
            }
        };
        if (isOpen) {
            setButtonImage(hoverImage);
            document.addEventListener('mousedown', handleClick);
            document.addEventListener('keydown', handleKeyDown);
        } else {
            setButtonImage(defaultImage);
            document.removeEventListener('mousedown', handleClick);
            document.removeEventListener('keydown', handleKeyDown);
        }
        return () => {
            document.removeEventListener('mousedown', handleClick);
            document.removeEventListener('keydown', handleKeyDown);
        };
    }, [isOpen, defaultImage, hoverImage]);


    const handleItemClick = (item: string) => {
        onItemClick(item);
        setIsOpen(false);
    };

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

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

    return (
        <div className="dropdown" ref={dropdownRef}>
            <button
                className={`dropdown-menu__toggle ${isOpen ? 'open' : ''}`}
                onClick={toggleMenu}
                onMouseEnter={() => setButtonImage(hoverImage)}
                onMouseLeave={() => !isOpen && setButtonImage(defaultImage)}

            >
                <img src={buttonImage} alt={title} />
                <span>{title}</span>
            </button>
            {isOpen && (
                <ul className="dropdown-menu__list">
                    {items.map((item) => (
                        <li key={item.value} onClick={() => handleItemClick(item.value)}>
                            <img src={RightChevron}/>{item.label}
                        </li>
                    ))}
                </ul>
            )}
        </div>
    );
};

export default DropdownMenu;