import React, { useState } from "react";
import { Link, useLocation } from "react-router-dom";
import { IoIosArrowDown } from "react-icons/io";

import styles from './SidebarItem.module.css';
import SidebarSubmenu from "./SidebarSubmenu";

interface SidebarItemProps {
  item: {
    id: string;
    name: string;
    link?: string;
    icon?: React.ComponentType;
    submenu?: {
        id: string;
        name: string;
        link?: string;
      }[];
    };
}

const SidebarItem: React.FC<SidebarItemProps> = ({ item }) => {
    const location = useLocation();
    const Icon = item.icon as React.ComponentType<React.SVGProps<SVGSVGElement>>;
    const hasSubItems = item.submenu && item.submenu.length > 0;

    const [isOpen, setIsOpen] = useState(false);
    
    const toggleSubmenu = (e: React.MouseEvent) => {
        if (hasSubItems) {
            e.preventDefault();
            setIsOpen(!isOpen);
        }
    };

    const isActive = item.link && location.pathname === item.link;

    return (
        <div className={styles.menu}>
            <li className={`${isActive ? styles.active : ""}`}>
                {Icon && <Icon className={styles.icon} />}
                {hasSubItems ? (
                    <a href="#" onClick={toggleSubmenu} className={styles.menuLink}>
                        {item.name}
                        <IoIosArrowDown className={`${styles.hassubmenu} ${isOpen ? styles.rotated : ''}`} />
                    </a>
                ) : (
                    <Link to={item.link || "#"}>{item.name}</Link>
                )}
            </li>
            {hasSubItems && <SidebarSubmenu item={item} isOpen={isOpen} />}
        </div>
    );
};

export default SidebarItem;