'use client'
import { useRouter } from 'next/navigation'
import { useMemo } from 'react'
import { buttonVariants } from '@heroui/react'

import { Dropdown, DropdownItem, DropdownMenu, DropdownSection, DropdownTrigger } from '@/components/heroui/Dropdown'
import { Avatar } from '@/components/heroui/Avatar'
import LogoutIcon from '@/components/icons/LogoutIcon'
import { fileAddress } from '@/helpers'
import { resolveUserAvatarSrc } from '@/lib/resolveUserAvatarSrc'
import useAuth from '@/hooks/useAuth'
import useAlertModal from '@/hooks/useAlertModal'
import EditIcon from '@/components/icons/EditIcon'
import { cn } from '@/lib/cn'

const UserDropdown = () => {
  const { user, logout } = useAuth()
  const { showAlert } = useAlertModal()
  const router = useRouter()
  const disableKeys = useMemo(() => [], [])
  const avatarSrc = resolveUserAvatarSrc({
    avatarUrl: user?.avatarUrl ?? (user?.imageId ? fileAddress(user.imageId) : null),
    gender: user?.gender,
  })

  return (
    <>
      <Dropdown placement="bottom-start">
        <DropdownTrigger
          aria-label="منوی حساب کاربری"
          className={cn(
            buttonVariants({
              isIconOnly: true,
              size: 'lg',
              variant: 'tertiary',
            }),
            'rounded-full p-0 outline-none'
          )}
        >
          <Avatar
            isBordered
            color="default"
            size="lg"
            src={avatarSrc}
          />
        </DropdownTrigger>

        <DropdownMenu
          aria-label="User Actions"
          disabledKeys={disableKeys}
          variant="flat"
        >
          <DropdownSection showDivider>
            <DropdownItem
              key="profile"
              startContent={<EditIcon className="size-4" />}
              onPress={() => {
                router.push('/profile/edit')
              }}
            >
              ویرایش پروفایل
            </DropdownItem>
          </DropdownSection>
          <DropdownItem
            key="logout"
            className="text-fourth"
            color="danger"
            startContent={<LogoutIcon className="size-4" />}
            onPress={() => {
              showAlert('برای خروج مطمئن هستید؟', logout)
            }}
          >
            خروج
          </DropdownItem>
        </DropdownMenu>
      </Dropdown>
    </>
  )
}

export default UserDropdown