import ChevronDownIcon from '@heroicons/react/24/outline/ChevronDownIcon';
import { useEffect, useState } from 'react';
import { Link, usePage } from '@inertiajs/react';

function SidebarSubmenu({ submenu, name, icon }) {
    const { url } = usePage();
    const [isExpanded, setIsExpanded] = useState(false);

    useEffect(() => {
        if (submenu.some(m => m.path === url)) {
            setIsExpanded(true);
        }
    }, [url, submenu]);

    return (
        <div className="flex flex-col">
            <div className="w-full block" onClick={() => setIsExpanded(!isExpanded)}>
                {icon} {name}
                <ChevronDownIcon
                    className={`w-5 h-5 mt-1 float-right delay-400 duration-500 transition-all ${isExpanded ? 'rotate-180' : ''
                        }`}
                />
            </div>
            <div className={`w-full ${isExpanded ? '' : 'hidden'}`}>
                <ul className="menu menu-compact">
                    {submenu.map((m, k) => (
                        <li key={k}>
                            <Link href={m.path}>
                                {m.icon} {m.name}
                                {url === m.path && (
                                    <span
                                        className="absolute mt-1 mb-1 inset-y-0 left-0 w-1 rounded-tr-md rounded-br-md bg-primary"
                                        aria-hidden="true"
                                    ></span>
                                )}
                            </Link>
                        </li>
                    ))}
                </ul>
            </div>
        </div>
    );
}

export default SidebarSubmenu;