import React from 'react'
import styles from './Sidebar.module.css'
import SidebarItem from './SidebarItem';
import useSidebarData from './SidebarData';
import SidebarUser from './SidebarUser';
import { useCurrentUser } from '../../hooks/useUsers';

interface SidebarItemType {
    id: string;
    name: string;
    link?: string;
    submenu?: SidebarItemType[];
}
  
interface SidebarProps {
    data: SidebarItemType[];
}

const Sidebar: React.FC<SidebarProps> = ({ data }) => {
    const { user, isLoading, error } = useCurrentUser();

    return (
        <div className={styles.sidebarContainer}>
            <div className={styles.logoContainer}>
                <img src="/logos/PowerOn_transparent.png" alt="Logo" className={styles.logo} />
            </div>

            <div>
                <SidebarUser 
                    user={{
                        id: user?.id || 0,
                        name: user?.fullName || user?.username || '',
                        role: user?.privilege || ''
                    }}
                    isLoading={isLoading}
                    error={error}
                />
            </div>
            
            <div className={styles.sidebar}>
                {data.map(item => {
                    return <SidebarItem key={item.id} item={item} />;
                })}
            </div>
        </div>
    )
}

const SidebarWithData: React.FC = () => {
    return <Sidebar data={useSidebarData()} />;
};

export default SidebarWithData;