import { type FC, useEffect } from 'react'
import Input from '@/components/Input'
// import { ArrowDown2, CloseCircle, HambergerMenu, Logout, Wallet } from 'iconsax-react'
// import AvatarImage from '../assets/images/avatar_image.png'
import { useTranslation } from 'react-i18next'
import { Link, useLocation } from 'react-router-dom'
import { Paths } from '@/config/Paths'
import { useSharedStore } from '@/shared/store/sharedStore'
import { Eye, HambergerMenu } from 'iconsax-react'
import { clx } from '@/helpers/utils'

type SidebarSize = 'default' | 'wide'

type HeaderProps = {
    hasMainSidebar?: boolean
    sidebarSize?: SidebarSize
}

const sidebarSizeClasses: Record<SidebarSize, { base: string; withSub: string }> = {
    default: {
        base: 'xl:right-[285px] xl:w-[calc(100%-305px)]',
        withSub: 'xl:right-[320px] xl:w-[calc(100%-340px)]',
    },
    wide: {
        base: 'xl:right-[390px] xl:w-[calc(100%-406px)]',
        withSub: 'xl:right-[425px] xl:w-[calc(100%-441px)]',
    },
}

const Header: FC<HeaderProps> = ({ hasMainSidebar = true, sidebarSize = 'default' }) => {

    // const location = useLocation();
    // const [popoverKey, setPopoverKey] = useState(0);
    const { t } = useTranslation('global')
    const { setOpenSidebar, openSidebar, hasSubMenu, setSearch } = useSharedStore()
    const location = useLocation()
    const editorPathPrefix = `${Paths.editor}/`
    const isEditorRoute =
        location.pathname.startsWith(editorPathPrefix) &&
        location.pathname.length > editorPathPrefix.length
    const editorDocumentId = isEditorRoute
        ? (location.pathname.slice(editorPathPrefix.length).split('/')[0] ?? '')
        : ''

    // useEffect(() => {
    //     setPopoverKey((prevKey) => prevKey + 1);
    // }, [location.pathname]);

    // const handleLogout = () => {
    //     removeToken()
    //     removeRefreshToken()
    //     window.location.href = Pages.auth.login
    // }

    useEffect(() => {
        setSearch('')
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [location.pathname])

    return (
        <div className={clx(
            'fixed z-10 right-4 left-4 top-4 xl:h-16 h-12 flex items-center px-6 bg-white justify-between rounded-[32px]',
            hasMainSidebar && (
                hasSubMenu
                    ? sidebarSizeClasses[sidebarSize].withSub
                    : sidebarSizeClasses[sidebarSize].base
            )
        )}>

            <div className='min-w-[270px] hidden xl:block'>
                <Input
                    variant='search'
                    placeholder={t('header.search')}
                    onChangeSearchFinal={(value) => setSearch(value)}
                />
            </div>
            <div onClick={() => setOpenSidebar(!openSidebar)} className='xl:hidden block'>
                <HambergerMenu size={24} color='black' />
            </div>
            {/* <img src={LogoImage} className='h-6 xl:hidden block absolute right-0 left-0 mx-auto' /> */}
            <div className='flex xl:gap-6 gap-4 items-center'>
                {isEditorRoute && editorDocumentId ? (
                    <Link
                        to={`${Paths.viewer}/${editorDocumentId}`}
                        className='flex items-center'
                        aria-label={t('header.open_viewer')}
                        title={t('header.open_viewer')}
                    >
                        <Eye size={20} color='black' />
                    </Link>
                ) : null}

                {/* <Link className='xl:hidden' to={Paths.wallet}>
                    <Wallet className='xl:size-[18px] size-[17px]' color='#da2129' />
                </Link> */}
                {/* <Notifications /> */}
                {/* {
                    data && (
                        <Popover className="relative" key={popoverKey}>
                            <PopoverButton >
                                <div className='flex gap-2 items-center mt-2.5'>
                                    <div className='size-6 rounded-full bg-description overflow-hidden'>
                                        <img src={data?.data?.user?.profilePic ? data?.data?.user?.profilePic : AvatarImage} className='size-full object-cover' />
                                    </div>
                                    <div className='xl:flex hidden gap-1 items-center'>
                                        <div className='text-xs'>
                                            {data?.data?.user?.firstName + ' ' + data?.data?.user?.lastName}
                                        </div>
                                        <ArrowDown2 size={14} color='#8C90A3' />
                                    </div>
                                </div>
                            </PopoverButton>

                            <PopoverPanel style={{ minHeight: window.innerWidth < 1140 ? window.innerHeight : undefined }} anchor="bottom" className="flex xl:ml-6 overflow-auto flex-col gap-3 bg-white boxShadow xl:mt-7  z-30 py-4 text-xs rounded-2.5 xl:w-[300px] -mt-[50px] w-full fixed xl:h-fit h-full shadow-md">
                                <div className='absolute xl:hidden top-6 left-6'>
                                    <CloseCircle onClick={() => setPopoverKey((prevKey) => prevKey + 1)} size={20} color='#da2129' />
                                </div>
                                <Link to={Pages.profile} className='flex flex-col gap-2 items-center justify-center border-b border-[#EAEDF5] pb-4'>
                                    <div className='size-14 rounded-full overflow-hidden'>
                                        <img src={data?.data?.user?.profilePic ? data?.data?.user?.profilePic : AvatarImage} className='size-full object-cover' />
                                    </div>

                                    <div>
                                        {data?.data?.user?.firstName + ' ' + data?.data?.user?.lastName}
                                    </div>

                                    <div className='text-description'>
                                        {data?.data?.user?.email}
                                    </div>
                                </Link>

                                <div className='px-6 mt-2'>
                                    <div onClick={() => handleLogout()} className='flex gap-2 items-center cursor-pointer'>
                                        <Logout size={20} color='#da2129' />
                                        <div>
                                            {t('sidebar.logout')}
                                        </div>
                                    </div>
                                </div>

                            </PopoverPanel>
                        </Popover>
                    )
                } */}
            </div>
        </div>
    )
}

export default Header