'use client'

import React from 'react'
import NotificationBellIcon from '../icons/NotificationBellIcon'
import Image from 'next/image'
import { ArrowDown2, HambergerMenu, LogoutCurve, ProfileCircle, Setting2 } from 'iconsax-react'
import Dropdown from '../utils/Dropdown'
import Seperator from '../utils/Seperator'
import Link from 'next/link'
import { useParams, useRouter } from 'next/navigation'
import useToggle from '@/hooks/helpers/useToggle'
import LogoutPrompt from '@/features/general/LogoutPrompt'
import { useGetProfile } from '@/app/[name]/(Profile)/profile/hooks/userProfileData'
import { useGetNotificationsCount } from '@/app/[name]/(Main)/hooks/useMenuData'
import { toastLoginRequired } from '../Toast'

type Props = {
    profileDropState: boolean,
    toggleProfileDropState: React.MouseEventHandler<HTMLButtonElement> | undefined
    menuState: boolean,
    toggleMenuState: React.MouseEventHandler<HTMLButtonElement> | undefined
    searchModalState: boolean,
    toggleSearchModalState: React.MouseEventHandler<HTMLDivElement> | undefined
    nightModeState: boolean,
    toggleNightModeState: React.MouseEventHandler<HTMLDivElement> | undefined
}

function TopBar({ profileDropState, toggleProfileDropState, toggleMenuState }: Props) {

    const params = useParams();
    const router = useRouter();
    const { name } = params;
    const { state: logoutModal, toggle: toggleLogoutModal } = useToggle();
    const { data: profile, isSuccess } = useGetProfile();
    const { data: notificationsCount } = useGetNotificationsCount();
    const profileData = profile?.data;
    const isLoggedIn = isSuccess && profileData;
    const fullName = profileData?.firstName ? `${profileData.firstName} ${profileData.lastName}`.trim() : `UDM-${profile?.data?.phone}`;

    const handleNotificationClick = (e: React.MouseEvent) => {
        e.preventDefault();
        if (!isLoggedIn) {
            toastLoginRequired(() => router.push(`/${name}/auth`), 'info');
        } else {
            router.push(`/${name}/notifications`);
        }
    };

    return (
        <div className="w-full">
            <div className='grid grid-cols-3 overflow-hidden rounded-2xl w-full h-12 lg:h-24 px-2 xl:gap-8 items-center'>
                <div className='inline-flex justify-between items-center'>
                    <button className='inline-block xl:hidden' onClick={toggleMenuState}>
                        <HambergerMenu className='stroke-foreground' size={24} />
                    </button>
                    {/* <div onClick={toggleSearchModalState} className='xl:bg-[#EEF0F7] xl:hidden inline-flex rounded-xl px-4 h-12 xl:w-[370px] items-center content-center' >
                        S
                    </div> */}
                    {/* <div
                        className={`z-50 top-0 left-0 w-full h-full px-5 py-15 md:px-15 xl:p-0 fixed xl:relative bg-primary/25 xl:bg-transparent backdrop-blur-sm xl:backdrop-blur-none justify-center xl:block ${searchModalState ? 'flex' : 'hidden'}`}>
                        <div
                            className={`w-full h-full absolute`}
                            onClick={toggleSearchModalState}>
                        </div>
                        <div className='z-55 bg-white w-full md:w-min xl:bg-transparent p-5 xl:p-0 items-center flex xl:block rounded-lg h-max'>
                        <BurgerMenuIcon />
                        </div>
                    </div> */}
                </div>
                <div className='flex justify-center'>
                    {/* <Image
                        width={73}
                        height={25}
                        alt='Profile avatar'
                        className='rounded-full dark:invert-100'
                        src={'/assets/images/danak-logo.png'} /> */}
                </div>
                <div className='flex items-center justify-end gap-3 xl:gap-6'>
                    {/* <NightModeSwitch checked={nightMode} onClick={toggleNightMode} /> */}
                    {/* <img className='hidden sm:block' src={rectangles} /> */}
                    <button
                        onClick={handleNotificationClick}
                        className='relative'>
                        <NotificationBellIcon className='size-4.5 text-icon-active dark:text-foreground' />
                        <span className='absolute -right-1 -top-1 flex items-center justify-center bg-primary size-3 rounded-full text-[8px] text-container dark:bg-white dark:text-black'>
                            <div className='mt-0.25 place-self-center'>{notificationsCount?.data?.count || '0'}</div>
                        </span>
                    </button>
                    {isLoggedIn ? (
                        <button
                            id='profile-drop-toggle'
                            className='flex items-center justify-between'
                            onClick={toggleProfileDropState}>
                            <Image
                                width={24}
                                height={24}
                                alt='Profile avatar'
                                className='rounded-full'
                                src={'/assets/images/avatar.svg'} />
                            <div className='pe-0 hidden xl:inline-flex items-end' >
                                <div className='ps-2 pe-1 text-xs text-nowrap'>{fullName}</div>
                                <ArrowDown2 className='stroke-disabled-text' size={14} />
                                {/* <img src={arrow} /> */}
                            </div>
                        </button>
                    ) : null
                        // (
                        //     <Link
                        //         href={`/${name}/auth`}
                        //         className='flex items-center gap-2 px-3 py-1.5 rounded-lg bg-primary text-white hover:bg-primary/90 transition-colors'>
                        //         <LoginCurve size={18} className='stroke-white' />
                        //         <span className='text-xs hidden xl:inline'>ورود</span>
                        //     </Link>
                        // )
                    }
                </div>

                {isLoggedIn && (
                    <Dropdown
                        active={profileDropState}
                        toggle={toggleProfileDropState}
                    >
                        <div className='place-items-center flex flex-col items-center justify-center pt-8'>
                            <Image
                                src={'/assets/images/avatar.svg'}
                                width={56}
                                height={56}
                                className='rounded-full'
                                unoptimized
                                alt={'user avatar'}
                            />
                            <p className='text-xs mt-2'>{fullName}</p>
                            {/* <p className='text-xs mt-2'>{profileData?.phone}</p> */}
                        </div>

                        <Seperator className='my-6' />

                        <div className='flex flex-col gap-3'>
                            <Link
                                href={`/${name}/profile`}
                                className='flex items-center gap-3 px-6'>
                                <ProfileCircle size={20} className='stroke-foreground' />
                                <div className='text-xs'>پروفایل</div>
                            </Link>
                            <Link
                                href={`/${name}/profile/settings`}
                                className='flex items-center gap-3 px-6'>
                                <Setting2 size={20} className='stroke-foreground' />
                                <div className='text-xs'>تنظیمات</div>
                            </Link>
                        </div>

                        <Seperator className='my-6' />
                        <button
                            onClick={(e) => {
                                toggleLogoutModal(e);
                                toggleProfileDropState?.(e)
                            }}
                            className='flex items-center gap-3 px-6'>
                            <LogoutCurve size={20} className='stroke-foreground' />
                            <div className='text-xs'>خروج</div>
                        </button>
                    </Dropdown>
                )}
            </div>

            <div
                data-active={logoutModal}
                className='fixed inset-0 data-[active=false]:pointer-events-none z-50'>
                <LogoutPrompt
                    visible={logoutModal}
                    onClick={toggleLogoutModal}
                    slug={name as string}
                />
            </div>
        </div>
    )
}

export default TopBar;