import { type FC, useEffect } from 'react'
import LogoImage from '../assets/images/logo.svg'
import LogoSmall from '../assets/images/logo-small.svg'
import { useTranslation } from 'react-i18next'
import {
    Home2,
    Element3,
    Receipt21,
    TicketDiscount,
    DocumentText,
    Truck,
    Money3,
    UserSquare,
    Chart,
    Setting2,
    Logout,
    Briefcase,
    Headphone,
} from 'iconsax-react'
import SideBarItem from './SideBarItem'
import { useLocation } from 'react-router-dom'
import { useSharedStore } from './store/sharedStore'
import { clx } from '../helpers/utils'
import BlogSubMenu from './components/BlogSubMenu'
import ShippingSubMenu from './components/ShippingSubMenu'
import DashboardSubMenu from './components/DashboardSubMenu'
import ProductsSubMenu from './components/ProductsSubMenu'
import OrdersSubMenu from './components/OrdersSubMenu'
import FinancialSubMenu from './components/FinancialSubMenu'
import SellersSubMenu from './components/SellersSubMenu'
import BuyersSubMenu from './components/BuyersSubMenu'
import UsersSubMenu from './components/UsersSubMenu'
import TicketsSubMenu from './components/TicketsSubMenu'
import ReportsSubMenu from './components/ReportsSubMenu'
import ChatSubMenu from './components/ChatSubMenu'
import ContactSubMenu from './components/ContactSubMenu'
import SettingsSubMenu from './components/SettingsSubMenu'
import PagesSubMenu from './components/PagesSubMenu'
import JobsSubMenu from './components/JobsSubMenu'
import CategorySubMenu from './components/CategorySubMenu'
import { Pages } from '../config/Pages'


const SideBar: FC = () => {

    const { t } = useTranslation('global')
    const { openSidebar, setOpenSidebar, hasSubMenu, setSubMenuName, setSubtMenu, subMenuName } = useSharedStore()
    const location = useLocation()

    const isActive = (name: string) => {
        return window.location.href.includes(name)
    }

    useEffect(() => {
        const split = location.pathname.split('/')

        if (split[1] === 'dashboard' || split[1] === 'products' || split[1] === 'orders' ||
            split[1] === 'blog' || split[1] === 'shipment' || split[1] === 'financial' ||
            split[1] === 'sellers' || split[1] === 'buyers' || split[1] === 'admin' ||
            split[1] === 'tickets' || split[1] === 'reports' || split[1] === 'chat' ||
            split[1] === 'contact' || split[1] === 'settings' || split[1] === 'pages' ||
            split[1] === 'jobs' || split[1] === 'category') {
            setSubMenuName(split[1])
            setSubtMenu(true)
        } else {
            setSubMenuName('')
            setSubtMenu(false)
        }
    }, [location.pathname, setSubMenuName, setSubtMenu])

    const iconSizeSideBar = 20

    return (
        <>
            {
                openSidebar && <div className='fixed top-0 left-0 right-0 bottom-0 bg-black/50 bg-opacity-50 z-10' onClick={() => setOpenSidebar(false)} />
            }
            <div
                className={clx(
                    'fixed xl:flex translate-x-[400px] xl:translate-x-0 transition-all ease-in-out opacity-0 invisible xl:visible xl:opacity-100  xl:right-4 right-0 xl:top-4 top-0 xl:bottom-4 bottom-0 xl:rounded-[32px] w-[250px] bg-white flex-col py-12',
                    openSidebar && 'opacity-100 visible -translate-x-[0px] block z-40',
                    hasSubMenu && 'w-24 !rounded-tl-none !rounded-bl-none'
                )}
            >
                <div className='flex justify-center'>
                    {
                        !hasSubMenu ?
                            <img src={LogoImage} className='w-[140px]' />
                            :
                            <img src={LogoSmall} className='w-7' />
                    }
                </div>

                <div className='flex-1 flex flex-col h-full overflow-y-auto no-scrollbar'>
                    <div className={clx(
                        'mt-10 px-12 text-header text-sm font-normal',
                        hasSubMenu && 'px-2 text-center'
                    )}>
                        {t('sidebar.menu')}
                    </div>

                    <div className='text-xs text-[#8C90A3]'>
                        {/* داشبورد */}
                        <SideBarItem
                            icon={<Home2 variant={isActive('dashboard') ? 'Bold' : 'Outline'} color={isActive('dashboard') ? '#da2129' : '#8C90A3'} size={iconSizeSideBar} />}
                            title="داشبورد"
                            isActive={isActive('dashboard')}
                            link="/dashboard"
                            activeName='dashboard'
                        />

                        {/* محصولات */}
                        <SideBarItem
                            icon={<Element3 variant={isActive('products') ? 'Bold' : 'Outline'} color={isActive('products') ? '#da2129' : '#8C90A3'} size={iconSizeSideBar} />}
                            title="محصولات"
                            isActive={isActive('products')}
                            link={Pages.products.list}
                            activeName='products'
                        />

                        {/* سفارشات */}
                        <SideBarItem
                            icon={<Receipt21 variant={isActive('orders') ? 'Bold' : 'Outline'} color={isActive('orders') ? '#da2129' : '#8C90A3'} size={iconSizeSideBar} />}
                            title="سفارشات"
                            isActive={isActive('orders')}
                            link="/orders"
                            activeName='orders'
                        />

                        {/* تخفیف ها */}
                        <SideBarItem
                            icon={<TicketDiscount variant={isActive('coupon') ? 'Bold' : 'Outline'} color={isActive('coupon') ? '#da2129' : '#8C90A3'} size={iconSizeSideBar} />}
                            title="تخفیف ها"
                            isActive={isActive('coupon')}
                            link={Pages.coupon.list}
                            activeName='coupon'
                        />

                        {/* بلاگ */}
                        <SideBarItem
                            icon={<DocumentText variant={isActive('blog') ? 'Bold' : 'Outline'} color={isActive('blog') ? '#da2129' : '#8C90A3'} size={iconSizeSideBar} />}
                            title="بلاگ"
                            isActive={isActive('blog')}
                            link="/blog"
                            activeName='blog'
                        />

                        {/* روش های ارسال */}
                        <SideBarItem
                            icon={<Truck variant={isActive('shipment') ? 'Bold' : 'Outline'} color={isActive('shipment') ? '#da2129' : '#8C90A3'} size={iconSizeSideBar} />}
                            title="روش های ارسال"
                            isActive={isActive('shipment')}
                            link={Pages.shipment.list}
                            activeName='shipment'
                        />

                        {/* مالی */}
                        <SideBarItem
                            icon={<Money3 variant={isActive('financial') ? 'Bold' : 'Outline'} color={isActive('financial') ? '#da2129' : '#8C90A3'} size={iconSizeSideBar} />}
                            title="مالی"
                            isActive={isActive('financial')}
                            link={Pages.financial.list}
                            activeName='financial'
                        />

                        {/* فروشندگان */}
                        {/* <SideBarItem
                            icon={<People variant={isActive('sellers') ? 'Bold' : 'Outline'} color={isActive('sellers') ? '#da2129' : '#8C90A3'} size={iconSizeSideBar} />}
                            title="فروشندگان"
                            isActive={isActive('sellers')}
                            link={Pages.sellers.list}
                            activeName='sellers'
                        /> */}

                        {/* خریداران */}
                        <SideBarItem
                            icon={<UserSquare variant={isActive('buy-users') ? 'Bold' : 'Outline'} color={isActive('buy-users') ? '#da2129' : '#8C90A3'} size={iconSizeSideBar} />}
                            title="خریداران"
                            isActive={isActive('buy-users')}
                            link={Pages.buyUsers.list}
                            activeName='buy-users'
                        />

                        {/* کاربران */}
                        {/* <SideBarItem
                            icon={<Profile variant={isActive('/admin') ? 'Bold' : 'Outline'} color={isActive('/admin') ? '#da2129' : '#8C90A3'} size={iconSizeSideBar} />}
                            title="ادمین ها"
                            isActive={isActive('/admin')}
                            link={Pages.admin.list}
                            activeName='/admin'
                        /> */}

                        {/* تیکت ها */}
                        {/* <SideBarItem
                            icon={<Messages3 variant={isActive('tickets') ? 'Bold' : 'Outline'} color={isActive('tickets') ? '#da2129' : '#8C90A3'} size={iconSizeSideBar} />}
                            title="تیکت ها"
                            isActive={isActive('tickets')}
                            link={Pages.ticket.list}
                            activeName='tickets'
                        /> */}

                        {/* گزارش ها */}
                        <SideBarItem
                            icon={<Chart variant={isActive('reports') ? 'Bold' : 'Outline'} color={isActive('reports') ? '#da2129' : '#8C90A3'} size={iconSizeSideBar} />}
                            title="گزارش ها"
                            isActive={isActive('reports')}
                            link={Pages.report.product}
                            activeName='reports'
                        />

                        {/* گفت و گو */}
                        {/* <SideBarItem
                            icon={<SmsTracking variant={isActive('chat') ? 'Bold' : 'Outline'} color={isActive('chat') ? '#da2129' : '#8C90A3'} size={iconSizeSideBar} />}
                            title="گفت و گو"
                            isActive={isActive('chat')}
                            link={Pages.messages.list}
                            activeName='chat'
                        /> */}

                        {/* ارتباط با ما */}
                        <SideBarItem
                            icon={<Headphone variant={isActive('contact') ? 'Bold' : 'Outline'} color={isActive('contact') ? '#da2129' : '#8C90A3'} size={iconSizeSideBar} />}
                            title="ارتباط با ما"
                            isActive={isActive('contact')}
                            link={Pages.contactUs.list}
                            activeName='contact'
                        />

                        {/* تنظیمات */}
                        <SideBarItem
                            icon={<Setting2 variant={isActive('settings') ? 'Bold' : 'Outline'} color={isActive('settings') ? '#da2129' : '#8C90A3'} size={iconSizeSideBar} />}
                            title="تنظیمات"
                            isActive={isActive('settings')}
                            link="/settings"
                            activeName='settings'
                        />

                        {/* مدیریت صفحات */}
                        <SideBarItem
                            icon={<DocumentText variant={isActive('pages') ? 'Bold' : 'Outline'} color={isActive('pages') ? '#da2129' : '#8C90A3'} size={iconSizeSideBar} />}
                            title="مدیریت صفحات"
                            isActive={isActive('pages')}
                            link={Pages.pages.aboutUs}
                            activeName='pages'
                        />

                        {/* مشاغل */}
                        <SideBarItem
                            icon={<Briefcase variant={isActive('jobs') ? 'Bold' : 'Outline'} color={isActive('jobs') ? '#da2129' : '#8C90A3'} size={iconSizeSideBar} />}
                            title="مشاغل"
                            isActive={isActive('jobs')}
                            link={Pages.jobs.list}
                            activeName='jobs'
                        />
                    </div>

                    <div className='flex-1 flex flex-col justify-end mt-14'>
                        <div className='text-xs text-[#8C90A3]'>
                            <SideBarItem
                                icon={<Logout variant={isActive('logout') ? 'Bold' : 'Outline'} color={isActive('logout') ? '#da2129' : '#8C90A3'} size={iconSizeSideBar} />}
                                title="خروج"
                                isActive={isActive('logout')}
                                link={`#`}
                                isLogout
                                activeName=''
                            />
                        </div>
                    </div>
                </div>
            </div>

            {/* منوی فرعی */}
            {
                hasSubMenu && (openSidebar || window.innerWidth > 1139) &&
                <div className='fixed  xl:right-[112px] right-[96px] bg-white z-20 xl:top-4 xl:bottom-4 top-0 bottom-0 rounded-tl-[32px] rounded-bl-[32px] w-[190px] border-r border-border'>
                    {
                        subMenuName === 'blog' ? <BlogSubMenu />
                            : subMenuName === 'dashboard' ? <DashboardSubMenu />
                                : subMenuName === 'products' ? <ProductsSubMenu />
                                    : subMenuName === 'orders' ? <OrdersSubMenu />
                                        : subMenuName === 'shipment' ? <ShippingSubMenu />
                                            : subMenuName === 'financial' ? <FinancialSubMenu />
                                                : subMenuName === 'sellers' ? <SellersSubMenu />
                                                    : subMenuName === 'buy-users' ? <BuyersSubMenu />
                                                        : subMenuName === 'admin' ? <UsersSubMenu />
                                                            : subMenuName === 'tickets' ? <TicketsSubMenu />
                                                                : subMenuName === 'reports' ? <ReportsSubMenu />
                                                                    : subMenuName === 'chat' ? <ChatSubMenu />
                                                                        : subMenuName === 'contact-us' ? <ContactSubMenu />
                                                                            : subMenuName === 'settings' ? <SettingsSubMenu />
                                                                                : subMenuName === 'pages' ? <PagesSubMenu />
                                                                                    : subMenuName === 'jobs' ? <JobsSubMenu />
                                                                                        : subMenuName === 'category' ? <CategorySubMenu />
                                                                                            : null
                    }
                </div>
            }
        </>
    )
}


export default SideBar