import { type FC } from 'react'
import Input from '@/components/Input'
import UserAvatar from '@/components/UserAvatar'
import { HambergerMenu } from 'iconsax-react'
import { Link } from 'react-router-dom'
import Notifications from '@/pages/notification/Notification'
import { useSharedStore } from './store/useSharedStore'
import { t } from '@/locale'
import { useGetAdminMe } from '@/pages/admin/hooks/useAdminData'
import { Paths } from '@/config/Paths'

const Header: FC = () => {

    const { setOpenSidebar, openSidebar } = useSharedStore()
    const { data } = useGetAdminMe()
    const admin = data?.data

    const displayName = [admin?.firstName, admin?.lastName].filter(Boolean).join(' ').trim()
    const roleTitle = admin?.role?.title || admin?.role?.name || ''

    return (
        <div className='fixed z-10 left-[var(--layout-frame)] right-[var(--layout-frame)] top-[var(--layout-frame)] flex h-[var(--layout-header-height)] items-center justify-between rounded-[32px] bg-white px-6 xl:left-auto xl:right-[calc(var(--layout-frame)+var(--layout-main-offset))] xl:h-[var(--layout-header-height-xl)] xl:w-[calc(100%-(var(--layout-frame)*2)-var(--layout-main-offset))]'>

            <div className='min-w-[270px] hidden xl:block'>
                <Input
                    variant='search'
                    placeholder={t('header.search')}
                />
            </div>
            <div onClick={() => setOpenSidebar(!openSidebar)} className='xl:hidden block'>
                <HambergerMenu size={24} color='black' />
            </div>
            <div className='flex xl:gap-6 gap-4 items-center'>
                <Notifications />
                {admin && (
                    <Link to={Paths.profile} className='flex gap-2 items-center mt-2.5'>
                        <UserAvatar
                            src={admin.avatarUrl}
                            firstName={admin.firstName}
                            lastName={admin.lastName}
                            className='size-6'
                            textClassName='text-xs'
                        />
                        <div className='xl:flex hidden flex-col items-start'>
                            <div className='text-xs'>
                                {displayName || String(admin.phone ?? '')}
                            </div>
                            {roleTitle && (
                                <div className='text-[10px] text-description'>
                                    {roleTitle}
                                </div>
                            )}
                        </div>
                    </Link>
                )}
            </div>
        </div>
    )
}

export default Header