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


import styles from './SidebarStyles/SidebarItem.module.css';
import SidebarSubmenu from "./SidebarSubmenu";
import { SidebarItemProps } from "./sidebarTypes";

const SidebarItem: React.FC<SidebarItemProps> = ({ 
  item, 
  isOpen, 
  onToggle, 
  isActive,
  isMinimized 
}) => {
    const Icon = item.icon as React.ComponentType<React.SVGProps<SVGSVGElement>>;
    const hasSubItems = item.submenu && item.submenu.length > 0;
    const isDisabled = item.moduleEnabled === false;

    const toggleSubmenu = (e: React.MouseEvent) => {
        if (isDisabled) {
            e.preventDefault();
            return;
        }
        if (hasSubItems) {
            e.preventDefault();
            onToggle();
        }
    };

    const handleLinkClick = (e: React.MouseEvent) => {
        if (isDisabled) {
            e.preventDefault();
            return;
        }
    };

    return (
        <div className={`${styles.menu} ${isMinimized ? styles.minimized : ''} ${isDisabled ? styles.disabled : ''}`}>
            <li className={`${isActive ? styles.active : ""} ${isDisabled ? styles.disabledItem : ""}`}>
                {/* Icon is always present */}
                {Icon && <Icon className={`${styles.icon} ${isDisabled ? styles.disabledIcon : ''}`} />}
                
                {/* Text content - always present but hidden when minimized */}
                {hasSubItems ? (
                    <a 
                        href="#" 
                        onClick={toggleSubmenu} 
                        className={`${styles.menuLink} ${isDisabled ? styles.disabledLink : ''}`}
                        aria-disabled={isDisabled}
                        title={isDisabled ? `${item.name} (Module disabled)` : item.name}
                    >
                        <span className={`${styles.menuText} ${isDisabled ? styles.disabledText : ''}`}>
                            {item.name}
                        </span>
                        <IoIosArrowDown className={`${styles.hassubmenu} ${isOpen ? styles.rotated : ''} ${isDisabled ? styles.disabledArrow : ''}`} />
                    </a>
                ) : (
                    <Link 
                        to={isDisabled ? "#" : (item.link || "#")} 
                        className={`${styles.menuLink} ${isDisabled ? styles.disabledLink : ''}`}
                        onClick={handleLinkClick}
                        aria-disabled={isDisabled}
                        title={isDisabled ? `${item.name} (Module disabled)` : item.name}
                    >
                        <span className={`${styles.menuText} ${isDisabled ? styles.disabledText : ''}`}>
                            {item.name}
                        </span>
                    </Link>
                )}
                

                {isMinimized && !isDisabled && (
                    <Link 
                        to={item.link || "#"} 
                        className={styles.minimizedOverlay}
                        title={item.name}
                        onClick={handleLinkClick}
                    />
                )}
            </li>
            {hasSubItems && !isMinimized && !isDisabled && <SidebarSubmenu item={item} isOpen={isOpen} />}
        </div>
    );
};

export default SidebarItem;