import {
  Avatar,
  Button,
  Dropdown,
  DropdownHeader,
  DropdownItem,
  Navbar as FlowbiteNavbar,
} from 'flowbite-react'
import { FiLogOut, FiMenu, FiUser } from 'react-icons/fi'
import { useRouter } from 'next/navigation'

import dropdownTheme from '@/lib/themes/dropdown'
import layoutTheme from '@/lib/themes/layout'
import { useAuth } from '@/lib/context/AuthContext'
import { useSidebar } from '@/lib/context/SidebarContext'
import buttonTheme from '@/lib/themes/button'
import NotificationDropdown from './NotificationDropdown'

export default function Navbar() {
  const { toggleSidebar } = useSidebar()
  const { user, logout } = useAuth()
  const router = useRouter()

  async function handleLogout(): Promise<void> {
    await logout()
    router.push('/login')
  }

  return (
    <FlowbiteNavbar
      fluid
      border
      className="px-4 sm:px-8"
      theme={layoutTheme.navbar}
    >
      <Button
        color="light"
        className="focus:ring-0 border-none bg-gray-50 flex items-center"
        title="toggle sidebar"
        theme={buttonTheme.button}
        size="sm"
        onClick={toggleSidebar}
      >
        <FiMenu className="h-5 w-5" />
      </Button>

      <div className="flex md:order-2 items-center gap-4">
        <NotificationDropdown />

        <Dropdown
          arrowIcon
          inline
          theme={dropdownTheme.dropdown}
          placement="bottom-end"
          label={
            <Avatar
              alt={
                user?.business?.business_name ??
                user?.driver?.name ??
                user?.affiliate?.name ??
                'User Avatar'
              }
              img={`https://api.dicebear.com/9.x/initials/svg?seed=${user?.business?.business_name ?? user?.driver?.name ?? user?.affiliate?.name}&backgroundType=gradientLinear`}
              rounded
              className="cursor-pointer"
            />
          }
        >
          <DropdownHeader>
            <span className="block text-sm font-medium">
              {user?.business?.business_name ??
                user?.driver?.name ??
                user?.affiliate?.name}
            </span>
            <span className="block truncate text-sm text-gray-400">
              {user?.business?.business_email ??
                user?.driver?.name ??
                user?.affiliate?.name}
            </span>
          </DropdownHeader>
          <DropdownItem
            icon={FiUser}
            onClick={() => router.push('/profile-settings')}
          >
            Profile Settings
          </DropdownItem>
          <DropdownItem icon={FiLogOut} onClick={handleLogout}>
            Logout
          </DropdownItem>
        </Dropdown>
      </div>
    </FlowbiteNavbar>
  )
}