'use client'
import { FC, Fragment, useEffect } from 'react'
import Image from 'next/image'
import Link from 'next/link'
import { HambergerMenu, Profile, SearchNormal } from 'iconsax-react'
import Button from '@/components/Button'
import { useSharedStore } from '@/shared/store/sharedStore'
import { getToken } from '@/config/func'
import { useGetMe } from './hooks/useShareData'
import { CONSOLE_URL, LOGIN_URL } from '@/config/const'

const Header: FC = () => {
    const { openSidebar, setOpenSidebar } = useSharedStore()

    const { setIsLogin, isLogin } = useSharedStore()

    const { data } = useGetMe()

    useEffect(() => {
        handleCheckLogin()
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [])

    const handleCheckLogin = async () => {
        const token = await getToken()
        if (!token) {
            setIsLogin(false)
        } else {
            setIsLogin(true)
        }
    }
    return (
        <Fragment>
            <div className='w-full h-[100px] bg-white/26 rounded-4xl border-[3px] border-white px-10 xl:block hidden'>
                <div className='flex items-center justify-between h-full'>
                    <Link href='/'>
                        <Image src='/images/logo.svg' alt='logo' width={150} height={40} />
                    </Link>

                    <ul className='flex items-center gap-8 text-sm'>
                        <Link href='/'>
                            <li>
                                خانه
                            </li>
                        </Link>

                        <Link href='/products'>
                            <li>
                                محصولات
                            </li>
                        </Link>

                        <Link href='/danak-services'>
                            <li>
                                خدمات
                            </li>
                        </Link>

                        <Link href='/about'>
                            <li>
                                درباره ی ما
                            </li>
                        </Link>

                        <Link href='/blogs'>
                            <li>
                                مجله
                            </li>
                        </Link>
                    </ul>

                    <div className='flex  items-center gap-4 text-sm'>
                        <div className='border-l-2 border-[#D8DCE4] pl-4'>
                            <SearchNormal
                                size={20}
                                color='black'
                            />
                        </div>

                        {typeof window !== 'undefined' && (
                            (() => {
                                const currentUrl = window.location.href
                                const profileLink = isLogin ? `${CONSOLE_URL}` : `${LOGIN_URL}?redirect=${encodeURIComponent(currentUrl)}`
                                return (
                                    <a href={profileLink} target='_blank' className='border-l-2 whitespace-nowrap border-[#D8DCE4] pl-4 flex gap-2'>
                                        <Profile
                                            size={20}
                                            color='black'
                                        />
                                        {isLogin ? (
                                            <div>{`${data?.data?.user?.firstName || ''} ${data?.data?.user?.lastName || ''}`}</div>
                                        ) : (
                                            <div>ورود | ثبت نام</div>
                                        )}
                                    </a>
                                )
                            })()
                        )}

                        <Link href='/contact'>
                            <Button
                                label='تماس با ما'
                                className='w-fit px-8'
                            />
                        </Link>
                    </div>
                </div>

            </div>

            <div className='h-[51px] bg-white/26 rounded-4xl border-[3px] border-white px-4 xl:hidden flex items-center justify-between'>
                <div className='flex-1'>
                    <HambergerMenu
                        onClick={() => setOpenSidebar(!openSidebar)}
                        size={24}
                        color='black'
                    />
                </div>

                <Image src='/images/logo.svg' alt='logo' width={73} height={24} />

                <div className='flex gap-2 items-center flex-1 justify-end'>
                    <SearchNormal
                        size={16}
                        color='black'
                    />

                    {typeof window !== 'undefined' && (
                        (() => {
                            const currentUrl = window.location.href
                            const profileLink = isLogin ? `${CONSOLE_URL}` : `${LOGIN_URL}?redirect=${encodeURIComponent(currentUrl)}`
                            return (
                                <a href={profileLink} target='_blank'>
                                    <Profile
                                        size={16}
                                        color='black'
                                    />
                                </a>
                            )
                        })()
                    )}
                </div>
            </div>
        </Fragment>
    )
}

export default Header