import SidebarItem from './SidebarItem'
import dashboardIcon from '../../assets/images/SideItemDashboardIcon.svg'
import usersIcon from '../../assets/images/SideItemUsersIcon.svg'
import productsIcon from '../../assets/images/SideItemProductsIcon.svg'
import categoriesIcon from '../../assets/images/SideItemCategoriesIcon.svg'
import ordersIcon from '../../assets/images/SideItemOrdersIcon.svg'
import ArticleIcon from '../../assets/images/ArticleIcon.svg'
import ContentsIcon from '../../assets/images/ContentsIcon.svg'
import topLogo from '../../assets/images/SidebarTopLogo.png'
import {Divider} from "@mui/material";
import {useEffect, useState} from "react";
export default function Sidebar({ sidebarOpen, setSidebarOpen }) {
    const [active, setActive] = useState({
        dashboard: true,
        users: false,
        products: false,
        categories: false,
        orders: false,
        article: false,
        contents: false
    })
    const [activeItem, setActiveItem] = useState('dashboard')

    useEffect(() => {
        handleActiveSideItem(window.location.pathname.slice(7).replace('/', ''))
    }, [])
    const handleActiveSideItem = (name) => {
        if (activeItem !== name) {
            setActive({
                ...active,
                [activeItem]: false,
                [name]: true
            })
            setActiveItem(name)
        }
    }

    return (
        <div className={(sidebarOpen ? "fixed lg:relative right-0 z-50" : "hidden ") + " flex flex-col w-60 h-full bg-1"}>
            <div className="p-6">
                <div className={'flex items-center mb-3'}>
                    <img src={topLogo} width={'20%'}/>
                    <span className={'mr-2 text-2xl font-[dana] text-gray-700 font-bold'}>نیلی پنل</span>
                </div>
                <span className={'font-[dana] text-gray-800 text-xl'}>خوش آمدید</span>
            </div>
            <Divider variant="middle" />
            <div className={'pl-6'}>
                <SidebarItem onClick={() => handleActiveSideItem('categories')} activeState={active.categories} icon={categoriesIcon} title="دسته بندی ها" href="/panel/categories" />
                <SidebarItem onClick={() => handleActiveSideItem('products')} activeState={active.products} icon={productsIcon} title="محصولات" href="/panel/products" />
                <SidebarItem onClick={() => handleActiveSideItem('article')} activeState={active.article} icon={ArticleIcon} title="مقالات" href="/panel/articles" />
                <SidebarItem onClick={() => handleActiveSideItem('contents')} activeState={active.contents} icon={ContentsIcon} title="محتوا" href="/panel/contents" />
                <SidebarItem onClick={() => handleActiveSideItem('orders')} activeState={active.orders} icon={ordersIcon} title="سفارشات" href="/panel/orders" />
            </div>
        </div>
    )
}