import React from 'react'

import styles from './SidebarStyles/Sidebar.module.css'
import SidebarItem from './SidebarItem';
import useSidebarFromPageConfigs from '../../hooks/useSidebar';
import { useSidebar as useGenericSidebar } from '../../core/PageManager/SidebarProvider';
import SidebarUser from './SidebarUser';
import { useSidebarLogic } from './sidebarLogic';
import { SidebarProps } from './sidebarTypes';
import { GoSidebarExpand, GoSidebarCollapse } from 'react-icons/go';


const Sidebar: React.FC<SidebarProps> = ({ data }) => {
    const sidebar = useSidebarLogic();

    // Ensure data is always an array
    const sidebarItems = Array.isArray(data) ? data : [];

    return (
        <div 
            className={`${styles.sidebarContainer} ${sidebar.state.isMinimized ? styles.minimized : ''}`}
        >
            <div className={styles.logoContainer}>
                <div className={styles.logoWrapper}>
                    <div className={styles.logoText}>
                        <span className={styles.logoPower}>Power</span>
                        <span className={styles.logoOn}>On</span>
                    </div>
                </div>
                
                {/* Minimize/Expand Toggle Button */}
                <button 
                    className={styles.toggleButton}
                    onClick={sidebar.state.isMinimized ? sidebar.expandSidebar : sidebar.minimizeSidebar}
                    title={sidebar.state.isMinimized ? "Expand Sidebar" : "Minimize Sidebar"}
                >
                    {sidebar.state.isMinimized ? (
                        <GoSidebarCollapse size={20} />
                    ) : (
                        <GoSidebarExpand size={20} />
                    )}
                </button>
            </div>
            
            <div 
                className={styles.sidebar}
            >
                {sidebarItems.map(item => {
                    return (
                        <SidebarItem 
                            key={item.id} 
                            item={item} 
                            isOpen={sidebar.isItemOpen(item.id)}
                            onToggle={() => sidebar.toggleItem(item.id)}
                            isActive={sidebar.isItemActive(item.link)}
                            isMinimized={sidebar.state.isMinimized}
                        />
                    );
                })}
            </div>

            <SidebarUser 
                isMinimized={sidebar.state.isMinimized}
            />
        </div>
    )
}

const SidebarWithData: React.FC = () => {
    // Try to use the generic sidebar first, fallback to old system
    let sidebarData, isLoading, error;
    
    try {
        const genericSidebar = useGenericSidebar();
        sidebarData = genericSidebar.sidebarItems;
        isLoading = genericSidebar.loading;
        error = genericSidebar.error;
    } catch {
        // Fallback to old system if generic sidebar is not available
        const oldSidebar = useSidebarFromPageConfigs();
        sidebarData = oldSidebar.items;
        isLoading = oldSidebar.isLoading;
        error = null;
    }
    
    if (isLoading) {
        return (
            <div className={`${styles.sidebarContainer}`}>
                <div className={styles.logoContainer}>
                    <div className={styles.logoWrapper}>
                        <div className={styles.logoText}>
                            <span className={styles.logoPower}>Power</span>
                            <span className={styles.logoOn}>On</span>
                        </div>
                    </div>
                </div>
                <div className={styles.sidebar}>
                    <div style={{ padding: '20px', textAlign: 'center' }}>
                        Loading...
                    </div>
                </div>
            </div>
        );
    }
    
    if (error) {
        return (
            <div className={`${styles.sidebarContainer}`}>
                <div className={styles.logoContainer}>
                    <div className={styles.logoWrapper}>
                        <div className={styles.logoText}>
                            <span className={styles.logoPower}>Power</span>
                            <span className={styles.logoOn}>On</span>
                        </div>
                    </div>
                </div>
                <div className={styles.sidebar}>
                    <div style={{ padding: '20px', textAlign: 'center', color: 'red' }}>
                        Error: {error}
                    </div>
                </div>
            </div>
        );
    }
    
    return <Sidebar data={sidebarData} />;
};

export default SidebarWithData;