import React, {useEffect} from 'react';
import {FaCaretDown} from 'react-icons/fa';

interface Props {
    openedMenu: number | null
    setOpenedMenu: (value: number | null) => void;
    className: string;
    menu: any;
    items: any;
    index: number;
}

export default function ActionDropdown({menu, items, className, setOpenedMenu, openedMenu, index}: Props) {

    useEffect(() => {
        const handleClickOutside = (e: MouseEvent) => {
            const target = e.target as Element;
            if (target.closest('.dropdown-menu') === null && target.closest('.dropdown') === null) {
                setOpenedMenu(null);
            }
        };
        document.addEventListener('click', handleClickOutside);
        return () => {
            document.removeEventListener('click', handleClickOutside);
        };
    }, [setOpenedMenu]);

    return (
        <li className="relative max-w-full">
            <button type="button" className={className} onClick={() => {
                setOpenedMenu(openedMenu === index ? null : index);
            }}>
                <span>{menu.icon}</span> {menu.name}<span><FaCaretDown/></span>
            </button>
            <ul className={`dropdown-menu shadow-md shadow-black/3 dark:shadow-black z-50 absolute left-0 sm:min-w-full sm:w-max py-1.5 rounded-md bg-color border-gray-100  ${openedMenu === index ? 'collapse:disabled' : 'collapse'}`}>
                {items.map((item: any, index: number) => (
                    item !== null && <li key={index} className="w-full">
                        <button type="button" onClick={item.action}
                                className="w-full text-start md:text-[13px] text-xs  py-1.5 px-4 text-color hover:text-[#f84525] hover:bg-gray-50 dark:hover:bg-black cursor-pointer">
                            {item.name}
                        </button>
                    </li>
                ))}
            </ul>
        </li>
    );
}