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;
        }
        e.preventDefault();
        e.stopPropagation();
        onToggle();
    };

    const handleLinkClick = (e: React.MouseEvent) => {
        if (isDisabled) {
            e.preventDefault();
            return;
        }
        // Allow normal navigation for the main link
    };

    return (
        <div className={`${styles.menu} ${isMinimized ? styles.minimized : ''} ${isDisabled ? styles.disabled : ''}`}>
            <li className={`${isActive ? styles.active : ""} ${isDisabled ? styles.disabledItem : ""}`}>
                {/* Icon - always visible */}
                {Icon && <Icon className={`${styles.icon} ${isDisabled ? styles.disabledIcon : ''}`} />}
                
                {/* Text and arrow - hidden when minimized */}
                {!isMinimized && (
                    <>
                        <Link 
                            to={isDisabled ? "#" : (item.link || "#")} 
                            className={`${styles.menuTextLink} ${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>
                        
                        {/* Arrow button separate from link */}
                        {hasSubItems && (
                            <button
                                onClick={toggleSubmenu}
                                className={`${styles.arrowButton} ${isDisabled ? styles.disabledArrow : ''}`}
                                aria-disabled={isDisabled}
                                title={isDisabled ? `${item.name} (Module disabled)` : `Toggle ${item.name} submenu`}
                            >
                                <IoIosArrowDown className={`${styles.hassubmenu} ${isOpen ? styles.rotated : ''} ${isDisabled ? styles.disabledArrow : ''}`} />
                            </button>
                        )}
                    </>
                )}
                

                {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;