/* eslint-disable @typescript-eslint/no-unused-vars */
'use client'

import React from 'react'
import NightModeSwitch from '../button/NightModeSwitch'
import BurgerMenuIcon from '../icons/BurgerMenuIcon'
import NotificationBellIcon from '../icons/NotificationBellIcon'
import WalletIcon from '../icons/WalletIcon'
import GridIcon from '../icons/GridIcon'
import Image from 'next/image'
import { ArrowDown2 } from 'iconsax-react'

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, menuState, toggleMenuState, searchModalState, toggleSearchModalState, nightModeState, toggleNightModeState }: Props) {
    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}>
                        <BurgerMenuIcon />
                    </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-[#00000044] 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' 
                        src={'/assets/images/danak-logo.png'} />
                </div>
                <div className='flex items-center justify-end gap-3'>
                    {/* <NightModeSwitch checked={nightMode} onClick={toggleNightMode} /> */}
                    {/* <img className='hidden sm:block' src={rectangles} /> */}
                    <GridIcon className='size-4.5 text-icon-active' />
                    <WalletIcon className='size-4.5 text-icon-active' />
                    <NotificationBellIcon className='size-4.5 text-icon-active' />
                    <button className='flex items-center justify-between' onClick={toggleProfileDropState}>
                        <Image 
                        width={24} 
                        height={24} 
                        alt='Profile avatar' 
                        className='rounded-full' 
                        src={'/assets/images/user-avatar.png'} />
                        <div className='pe-0 hidden xl:inline-flex items-end' >
                            <div className='ps-2 pe-1 text-xs text-nowrap'>مهرداد مظفری</div>
                            <ArrowDown2 className='stroke-disabled-text' size={14} />
                            {/* <img src={arrow} /> */}
                        </div>
                    </button>
                </div>
                {/* <Dropdown state={profileDrop} toggle={setProfileDrop} /> */}
            </div>
        </div>
    )
}

export default TopBar;