'use client'
import Image from 'next/image'
import React, { useState } from 'react'
import logo from '@/assets/icons/maw-white.svg'
import Avatar from '@/assets/icons/avatar.svg'
import { Bell, Menu, MessageCircleMore } from 'lucide-react'
import { Input } from '../ui/input'
import { Button } from '../ui/button'
import Link from 'next/link'
import Drawer from './drawer'
import { useDispatch, useSelector } from 'react-redux'
import {
    Popover,
    PopoverContent,
    PopoverTrigger,
} from "@/components/ui/popover"
import { unsetAuthUser } from '@/store/slices/auth'
import { usePathname } from 'next/navigation'

const MainHeader = () => {
    let [isOpen, setIsOpen] = useState(false)
    const toggleDrawer = () => {
        setIsOpen(!isOpen);
    };
    const dispatch = useDispatch()
    const user = useSelector((state: any) => state.auth.user)
    const logout = async () => {
        dispatch(unsetAuthUser())
    }
    const pathname = usePathname()
    console.log(pathname)
    return (
        <div className={`${pathname !== '/' && 'border-b'} border-gray-500 relative z-10`}>
            <div className='w-11/12 mx-auto px-5 flex items-center justify-between' >
                <Link href='/'>
                    <Image src={logo} width={80} height={80} alt="MAW" />
                </Link>
                {
                    pathname !== '/' &&
                    <>
                        <ul className='gap-5 hidden md:flex text-nowrap text-sm md:text-sm xl:text-base xl:gap-10'>
                            <Link href="/">Home</Link>
                            <Link href="">About Us</Link>
                            <Link href="/contact-us">Contact Us</Link>
                            <Link href="">Explore</Link>
                        </ul>
                        <div className='hidden md:block max-w-96 rounded-full w-max overflow-hidden border border-white grow'>
                            <div className='flex '>
                                <Input className='!ring-0 !ring-offset-0 bg-transparent focus-visible:bg-white focus-visible:text-black rounded-none text-white outline-none border-0' placeholder='Search' />
                                <Link href='/search'>
                                    <Button className='rounded-l-none rounded-r-full'>Search</Button>
                                </Link>
                            </div>
                        </div>
                    </>
                }
                <div className='hidden md:flex items-center gap-3'>
                    {
                        user && user?.name !== "" ?
                            <>
                                <MessageCircleMore />
                                <Bell />
                                <Popover>
                                    <PopoverTrigger>
                                        <Image src={Avatar} width={40} height={40} alt="MAW" className='rounded-full object-cover' />
                                    </PopoverTrigger>
                                    <PopoverContent className='flex flex-col max-w-60'>
                                        <Button onClick={() => logout()} variant='link'>Logout</Button>
                                    </PopoverContent>
                                </Popover>
                            </>
                            :
                            <>
                                <Link href='/sign-in'><Button className='text-base h-10' variant='ghost'>Login</Button></Link>
                                <Link href='/register'><Button className='text-base h-10 px-6 rounded-none'>Sign Up</Button></Link>
                            </>
                    }
                </div>
                <div className='md:hidden' onClick={toggleDrawer}
                    aria-label={isOpen ? 'Close drawer' : 'Open drawer'}>
                    <Menu className='w-6 h-6' />
                </div>
            </div >
            <Drawer isOpen={isOpen} toggleDrawer={toggleDrawer} />
        </div>
    )
}

export default MainHeader