import { 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 { Building, Card, Code, CodeCircle, DocumentLike, DocumentText, Gallery, Headphone, Home2, Logout, Messages3, Money3, NotificationStatus, People, Profile, Receipt21, Setting2, SmsTracking, Teacher, TicketDiscount, UserSquare } 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 ServicesSubMenu from './components/ServicesSubMenu'
import { SideBarItemHasSubMenu } from '../config/SideBarSubMenu'
import ReceiptSubMenu from './components/ReceiptSubMenu'
import CustomerSubMenu from './components/CustomerSubMenu'
import TicketSubMenu from './components/TicketSubMenu'
import UsersSubMenu from './components/UsersSubMenu'
import LearningSubMenu from './components/LearningSubMenu'
import BlogSubMenu from './components/BlogSubMenu'
import { useGetProfile } from '../pages/profile/hooks/useProfileData'
import SupportSubMenu from './components/SupportSubMenu'
import CompanySubMenu from './components/CompanySubMenu'
const SideBar: FC = () => {

    const { t } = useTranslation('global')
    const { openSidebar, setOpenSidebar, hasSubMenu, setSubMenuName, setSubtMenu, subMenuName } = useSharedStore()
    const location = useLocation()
    const { data: profile } = useGetProfile()
    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 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') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                            title={t('sidebar.mainpage')}
                            isActive={isActive('dashboard')}
                            link={Pages.dashboard}
                            activeName=''
                        />

                        <SideBarItem
                            icon={<Building variant={isActive('company') ? 'Bold' : 'Outline'} color={isActive('company') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                            title={t('sidebar.company')}
                            isActive={isActive('company')}
                            link={Pages.company.list}
                            activeName='company'
                        />

                        <SideBarItem
                            icon={<Headphone variant={isActive('support') ? 'Bold' : 'Outline'} color={isActive('support') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                            title={t('sidebar.support')}
                            isActive={isActive('support')}
                            link={Pages.support.list}
                            activeName='support_plan'
                        />

                        <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}
                            activeName='customers'
                        />
                        <SideBarItem
                            icon={<UserSquare variant={isActive('representatives') ? 'Bold' : 'Outline'} color={isActive('representatives') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                            title={t('sidebar.representatives')}
                            isActive={isActive('representatives')}
                            link={Pages.representative.list}
                            activeName='agents'
                        />
                        <SideBarItem
                            icon={<CodeCircle variant={isActive('developers') ? 'Bold' : 'Outline'} color={isActive('developers') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                            title={t('sidebar.developers')}
                            isActive={isActive('developers')}
                            link={Pages.developers.list}
                            activeName='developers'
                        />


                        <SideBarItem
                            icon={<Receipt21 variant={isActive('receipts') ? 'Bold' : 'Outline'} color={isActive('receipts') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                            title={t('sidebar.receipt_list')}
                            isActive={isActive('receipts')}
                            link={Pages.receipts.index}
                            activeName='invoices'
                        />
                        <SideBarItem
                            icon={<Card variant={isActive('transactions') ? 'Bold' : 'Outline'} color={isActive('transactions') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                            title={t('sidebar.transactions')}
                            isActive={isActive('transactions')}
                            link={Pages.transactions}
                            activeName='transactions'
                        />
                        <SideBarItem
                            icon={<Money3 variant={isActive('payments') ? 'Bold' : 'Outline'} color={isActive('payments') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                            title={t('sidebar.payments')}
                            isActive={isActive('payments')}
                            link={Pages.payment.list}
                            activeName='payments'
                        />
                        <SideBarItem
                            icon={<TicketDiscount variant={isActive('discounts') ? 'Bold' : 'Outline'} color={isActive('discounts') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                            title={t('sidebar.discounts')}
                            isActive={isActive('discounts')}
                            link={Pages.discount.list}
                            activeName='discounts'
                        />
                        <SideBarItem
                            icon={<Code variant={isActive('referral-code') ? 'Bold' : 'Outline'} color={isActive('referral-code') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                            title={t('sidebar.code_referral')}
                            isActive={isActive('referral-code')}
                            link={Pages.referralCode.list}
                            activeName='referralCode'
                        />
                        <SideBarItem
                            icon={<Profile variant={isActive('users') ? 'Bold' : 'Outline'} color={isActive('users') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                            title={t('sidebar.users')}
                            isActive={isActive('users')}
                            link={Pages.users.list}
                            activeName='admins'
                        />
                        <SideBarItem
                            icon={<Gallery variant={isActive('sliders') ? 'Bold' : 'Outline'} color={isActive('sliders') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                            title={t('sidebar.sliders')}
                            isActive={isActive('sliders')}
                            link={Pages.sliders.list}
                            activeName='blogs'
                        />

                    </div>

                    {
                        profile?.data?.user?.roles.some((role: { name: string }) => role.name === 'super_admin') &&
                        <div className={clx(
                            'mt-10 px-12 text-header text-sm font-normal',
                            hasSubMenu && 'px-2 text-center'
                        )}>
                            {t('sidebar.other')}
                        </div>
                    }




                    <div className='text-xs text-[#8C90A3]'>
                        <SideBarItem
                            icon={<Messages3 variant={isActive('tickets') ? 'Bold' : 'Outline'} color={isActive('tickets') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                            title={t('sidebar.ticket')}
                            isActive={isActive('tickets')}
                            link={Pages.ticket.list}
                            activeName='tickets'
                        />
                    </div>

                    <div className='text-xs text-[#8C90A3]'>
                        <SideBarItem
                            icon={<DocumentText variant={isActive('criticisms') ? 'Bold' : 'Outline'} color={isActive('criticisms') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                            title={t('sidebar.criticisms')}
                            isActive={isActive('criticisms')}
                            link={Pages.criticisms.list}
                            activeName='criticisms'
                        />
                    </div>

                    {
                        profile?.data?.user?.roles?.some((role: { name: string }) => role.name === 'super_admin') &&
                        <div className={clx(
                            'mt-10 px-12 text-header text-sm font-normal',
                            hasSubMenu && 'px-2 text-center text-xs'
                        )}>
                            {t('sidebar.mnage_content')}
                        </div>
                    }


                    <div className='text-xs text-[#8C90A3]'>
                        <SideBarItem
                            icon={<DocumentLike variant={isActive('ads') ? 'Bold' : 'Outline'} color={isActive('ads') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                            title={t('sidebar.ads')}
                            isActive={isActive('ads')}
                            link={Pages.ads.list}
                            activeName='advertisements'
                        />
                    </div>

                    <div className='text-xs text-[#8C90A3]'>
                        <SideBarItem
                            icon={<NotificationStatus variant={isActive('announcement') ? 'Bold' : 'Outline'} color={isActive('announcement') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                            title={t('sidebar.announcement')}
                            isActive={isActive('announcement')}
                            link={Pages.announcement.list}
                            activeName='announcements'
                        />
                    </div>

                    <div className='text-xs text-[#8C90A3]'>
                        <SideBarItem
                            icon={<DocumentText variant={isActive('blog') ? 'Bold' : 'Outline'} color={isActive('blog') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                            title={t('sidebar.blog')}
                            isActive={isActive('blog')}
                            link={Pages.blog.list}
                            activeName='blogs'
                        />
                    </div>

                    <div className='text-xs text-[#8C90A3]'>
                        <SideBarItem
                            icon={<Teacher variant={isActive('learning') ? 'Bold' : 'Outline'} color={isActive('learning') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                            title={t('sidebar.learning')}
                            isActive={isActive('learning')}
                            link={Pages.learning.list}
                            activeName='learnings'
                        />
                    </div>

                    <div className='text-xs text-[#8C90A3]'>
                        <SideBarItem
                            icon={<SmsTracking variant={isActive('messages') ? 'Bold' : 'Outline'} color={isActive('messages') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                            title={t('sidebar.messages')}
                            isActive={isActive('messages')}
                            link={Pages.messages.list}
                            activeName='contacts_us'
                        />
                    </div>



                    <div className='flex-1 flex flex-col justify-end mt-14'>
                        <div className='text-xs text-[#8C90A3]'>
                            <SideBarItem
                                icon={<Card variant={isActive('card') ? 'Bold' : 'Outline'} color={isActive('card') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                                title={t('sidebar.card')}
                                isActive={isActive('card')}
                                link={Pages.cardBank.list}
                                activeName='bank_accounts'
                            />
                        </div>
                        <div className='text-xs text-[#8C90A3]'>
                            <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'>
                    {
                        subMenuName === 'services' ?
                            <ServicesSubMenu />
                            : subMenuName === 'receipts' ?
                                <ReceiptSubMenu />
                                : subMenuName === 'customers' ?
                                    <CustomerSubMenu />
                                    : subMenuName === 'tickets' ?
                                        <TicketSubMenu />
                                        : subMenuName === 'users' ?
                                            <UsersSubMenu />
                                            : subMenuName === 'learning' ?
                                                <LearningSubMenu />
                                                : subMenuName === 'blog' ?
                                                    <BlogSubMenu />
                                                    : subMenuName === 'support' ?
                                                        <SupportSubMenu />
                                                        : subMenuName === 'company' ?
                                                            <CompanySubMenu />
                                                            : null
                    }
                </div>
            }
        </>
    )
}

export default SideBar