import { type FC, useEffect } from 'react'
import LogoImage from '../assets/images/logo.png'
import LogoSmall from '../assets/images/logo-small.png'
import { useTranslation } from 'react-i18next'
import { DocumentText, Home2, Logout, People, Setting2, TicketDiscount, Calendar, Security, Card, SecurityUser, TruckFast, Element3, Star1, NotificationBing, SmsEdit } from 'iconsax-react'
import SideBarItem from './SideBarItem'
import { useLocation } from 'react-router-dom'
import { Pages } from '../config/Pages'
import { useSharedStore } from './store/sharedStore'
import { clx } from '../helpers/utils'
import ProductsSubMenu from './components/ProductsSubMenu'
import OrdersSubMenu from './components/OrdersSubMenu'
import CustomersSubMenu from './components/CustomersSubMenu'
import DiscountSubMenu from './components/DiscountSubMenu'
import { SideBarItemHasSubMenu } from '../config/SideBarSubMenu'
import { usePermissions } from '@/hooks/usePermissions'
import { PermissionEnum } from '@/pages/roles/enum/Enum'
import Skeleton from 'react-loading-skeleton'

const SideBar: FC = () => {

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

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

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

        if (SideBarItemHasSubMenu.includes(split[1])) {
            setSubMenuName(split[1])
            setSubtMenu(true)
        } else {
            setSubMenuName('')
            setSubtMenu(false)
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [location.pathname])

    const iconSizeSideBar = 20


    return (
        <>
            {
                openSidebar && <div className='fixed top-0 left-0 right-0 bottom-0 bg-black/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 duration-300',
                    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>

                    {isLoading ? (
                        <div className='text-xs text-[#8C90A3] mt-4 px-12 space-y-4'>
                            {Array.from({ length: 8 }).map((_, index) => (
                                <div key={index} className={clx(
                                    'flex gap-9',
                                    hasSubMenu && 'flex-col items-center'
                                )}>
                                    <div className={clx(
                                        'flex gap-3 items-center',
                                        hasSubMenu && 'flex-col'
                                    )}>
                                        <Skeleton circle width={20} height={20} />
                                        <Skeleton width={hasSubMenu ? 40 : 100} height={16} />
                                    </div>
                                </div>
                            ))}
                        </div>
                    ) : (
                        <div className='text-xs text-[#8C90A3]'>
                            {checkPermission(PermissionEnum.MANAGE_REPORTS) && (
                                <SideBarItem
                                    icon={<Home2 variant={isActive('dashboard') ? 'Bold' : 'Outline'} color={isActive('dashboard') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                                    title={t('sidebar.mainpage')}
                                    isActive={isActive('dashboard')}
                                    link={Pages.dashboard}
                                    activeName=''
                                />
                            )}

                            {checkPermission(PermissionEnum.MANAGE_ORDERS) && (
                                <SideBarItem
                                    icon={<DocumentText variant={isActive('orders') ? 'Bold' : 'Outline'} color={isActive('orders') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                                    title={t('sidebar.orders')}
                                    isActive={isActive('orders')}
                                    link={Pages.orders.list}
                                    name='orders'
                                    activeName='orders'
                                />
                            )}

                            {checkPermission(PermissionEnum.MANAGE_FOODS) && (
                                <SideBarItem
                                    icon={<Element3 variant={isActive('products') ? 'Bold' : 'Outline'} color={isActive('products') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                                    title={t('sidebar.foods')}
                                    isActive={isActive('products')}
                                    link={Pages.products.list}
                                    activeName='products'
                                />
                            )}

                            {checkPermission(PermissionEnum.MANAGE_SCHEDULES) && (
                                <SideBarItem
                                    icon={<Calendar variant={isActive('schedule') ? 'Bold' : 'Outline'} color={isActive('schedule') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                                    title={t('sidebar.schedule')}
                                    isActive={isActive('schedule')}
                                    link={Pages.schedule.list}
                                    name='schedule'
                                    activeName='schedule'
                                />
                            )}

                            {checkPermission(PermissionEnum.MANAGE_PAYMENTS) && (
                                <SideBarItem
                                    icon={<Card variant={isActive('payment_methods') ? 'Bold' : 'Outline'} color={isActive('payment_methods') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                                    title={t('sidebar.payment_methods')}
                                    isActive={isActive('payment_methods')}
                                    link={Pages.payment_methods.list}
                                    name='payment_methods'
                                    activeName='payment_methods'
                                />
                            )}

                            {checkPermission(PermissionEnum.MANAGE_USERS) && (
                                <SideBarItem
                                    icon={<People variant={isActive('customers') ? 'Bold' : 'Outline'} color={isActive('customers') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                                    title={t('sidebar.customers')}
                                    isActive={isActive('customers')}
                                    link={Pages.customers.list}
                                    name='customers'
                                    activeName='customers'
                                />
                            )}

                            {checkPermission(PermissionEnum.MANAGE_REVIEWS) && (
                                <SideBarItem
                                    icon={<Star1 variant={isActive('reviews') ? 'Bold' : 'Outline'} color={isActive('reviews') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                                    title={t('sidebar.reviews')}
                                    isActive={isActive('reviews')}
                                    link={Pages.reviews.list}
                                    name='reviews'
                                    activeName='reviews'
                                />
                            )}

                            {checkPermission(PermissionEnum.MANAGE_PAGER) && (
                                <SideBarItem
                                    icon={<NotificationBing variant={isActive('pagers') ? 'Bold' : 'Outline'} color={isActive('pagers') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                                    title={t('sidebar.pagers')}
                                    isActive={isActive('pagers')}
                                    link={Pages.pagers.list}
                                    name='pagers'
                                    activeName='pagers'
                                />
                            )}

                            {checkPermission(PermissionEnum.MANAGE_ADMINS) && (
                                <SideBarItem
                                    icon={<SecurityUser variant={isActive('admins') ? 'Bold' : 'Outline'} color={isActive('admins') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                                    title={t('sidebar.admins')}
                                    isActive={isActive('admins')}
                                    link={Pages.admins.list}
                                    name='admins'
                                    activeName='admins'
                                />
                            )}

                            {checkPermission(PermissionEnum.MANAGE_DELIVERY) && (
                                <SideBarItem
                                    icon={<TruckFast variant={isActive('shipment_methods') ? 'Bold' : 'Outline'} color={isActive('shipment_methods') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                                    title={t('sidebar.shipment_methods')}
                                    isActive={isActive('shipment_methods')}
                                    link={Pages.shipment_methods.list}
                                    name='shipment_methods'
                                    activeName='shipment_methods'
                                />
                            )}

                            {checkPermission(PermissionEnum.MANAGE_COUPONS) && (
                                <SideBarItem
                                    icon={<TicketDiscount variant={isActive('discounts') ? 'Bold' : 'Outline'} color={isActive('discounts') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                                    title={t('sidebar.discount')}
                                    isActive={isActive('discounts')}
                                    link={Pages.coupons.list}
                                    name='discounts'
                                    activeName='discounts'
                                />
                            )}

                            {checkPermission(PermissionEnum.MANAGE_ROLES) && (
                                <SideBarItem
                                    icon={<Security variant={isActive('roles') ? 'Bold' : 'Outline'} color={isActive('roles') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                                    title={t('sidebar.roles')}
                                    isActive={isActive('roles')}
                                    link={Pages.roles.list}
                                    name='roles'
                                    activeName='roles'
                                />
                            )}

                            {/* {
                                checkPermission(PermissionEnum.MANAGE_SETTINGS) && (
                                    <SideBarItem
                                        icon={<NotificationStatus variant={isActive('notifications') ? 'Bold' : 'Outline'} color={isActive('notifications') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                                        title={t('sidebar.notifications')}
                                        isActive={isActive('notifications')}
                                        link={Pages.notifications.list}
                                        name='notifications'
                                        activeName='notifications'
                                    />
                                )
                            } */}
                        </div>
                    )}

                    <div className={clx(
                        'mt-10 px-12 text-header text-sm font-normal',
                        hasSubMenu && 'px-2 text-center'
                    )}>
                        {t('sidebar.other')}
                    </div>

                    {isLoading ? (
                        <div className='text-xs text-[#8C90A3] mt-4 px-12 space-y-4'>
                            <div className={clx(
                                'flex gap-9',
                                hasSubMenu && 'flex-col items-center'
                            )}>
                                <div className={clx(
                                    'flex gap-3 items-center',
                                    hasSubMenu && 'flex-col'
                                )}>
                                    <Skeleton circle width={20} height={20} />
                                    <Skeleton width={hasSubMenu ? 40 : 100} height={16} />
                                </div>
                            </div>
                        </div>
                    ) : (
                        <div className='text-xs text-[#8C90A3]'>
                            {/* {checkPermission(PermissionEnum.VIEW_REPORTS) && (
                                <SideBarItem
                                    icon={<Chart1 variant={isActive('statistics') ? 'Bold' : 'Outline'} color={isActive('statistics') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                                    title={t('sidebar.statistics')}
                                    isActive={isActive('statistics')}
                                    link={Pages.statistics.list}
                                    activeName='statistics'
                                />
                            )} */}
                            {/* {checkPermission(PermissionEnum.MANAGE_CONTACTS) && (
                                <SideBarItem
                                    icon={<Message variant={isActive('comments') ? 'Bold' : 'Outline'} color={isActive('comments') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                                    title={t('sidebar.comments')}
                                    isActive={isActive('comments')}
                                    link={Pages.comments.list}
                                    activeName='comments'
                                />
                            )} */}

                            {checkPermission(PermissionEnum.MANAGE_REPORTS) && (
                                <SideBarItem
                                    icon={<SmsEdit variant={isActive('reports') ? 'Bold' : 'Outline'} color={isActive('reports') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                                    title={t('sidebar.reports')}
                                    isActive={isActive('reports')}
                                    link={Pages.reports.list}
                                    activeName='reports'
                                />
                            )}
                        </div>
                    )}

                    <div className='flex-1 flex flex-col justify-end mt-14'>
                        {isLoading ? (
                            <div className='text-xs text-[#8C90A3] px-12 space-y-4'>
                                <div className={clx(
                                    'flex gap-9',
                                    hasSubMenu && 'flex-col items-center'
                                )}>
                                    <div className={clx(
                                        'flex gap-3 items-center',
                                        hasSubMenu && 'flex-col'
                                    )}>
                                        <Skeleton circle width={20} height={20} />
                                        <Skeleton width={hasSubMenu ? 40 : 100} height={16} />
                                    </div>
                                </div>
                                <div className={clx(
                                    'flex gap-9',
                                    hasSubMenu && 'flex-col items-center'
                                )}>
                                    <div className={clx(
                                        'flex gap-3 items-center',
                                        hasSubMenu && 'flex-col'
                                    )}>
                                        <Skeleton circle width={20} height={20} />
                                        <Skeleton width={hasSubMenu ? 40 : 100} height={16} />
                                    </div>
                                </div>
                            </div>
                        ) : (
                            <>
                                <div className='text-xs text-[#8C90A3]'>
                                    {checkPermission(PermissionEnum.MANAGE_SETTINGS) && (
                                        <SideBarItem
                                            icon={<Setting2 variant={isActive('setting') ? 'Bold' : 'Outline'} color={isActive('setting') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                                            title={t('sidebar.setting')}
                                            isActive={isActive('setting')}
                                            link={Pages.setting}
                                            activeName='settings'
                                        />
                                    )}
                                </div>
                                <div className='text-xs text-[#8C90A3]'>
                                    <SideBarItem
                                        icon={<Logout variant={isActive('logout') ? 'Bold' : 'Outline'} color={isActive('logout') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                                        title={t('sidebar.logout')}
                                        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 === 'products' ?
                            <ProductsSubMenu />
                            : subMenuName === 'orders' ?
                                <OrdersSubMenu />
                                : subMenuName === 'customers' ?
                                    <CustomersSubMenu />
                                    : subMenuName === 'discounts' ?
                                        <DiscountSubMenu />
                                        : null
                    }
                </div>
            }
        </>
    )
}

export default SideBar