/* eslint-disable camelcase */
/* eslint-disable import/prefer-default-export */
import React, { ReactElement } from 'react'

import classNames from 'classnames'
import { useAuth } from 'nlv-auth'
import { Link } from 'react-router-dom'

import { Button } from '../Button'
import { Text } from '../Text'
import { DropDown } from './DropDown'
import { getInitialLetter } from '../../utils'

type ProfileDropdownMenu = {
  label: string
  icon: ReactElement
  onClick?: () => void
  href?: string
  type: 'button' | 'link'
}

interface ProfileDropDownProps {
  extraProfileDropdownMenu?: ProfileDropdownMenu[]
}

export const ProfileDropDown = (props: ProfileDropDownProps) => {
  const { extraProfileDropdownMenu } = props
  const {
    // eslint-disable-next-line camelcase
    authUser: { email, name, user_image, role, country },
    logoutUser,
  } = useAuth()

  return (
    <DropDown
      onHover
      content={
        <div className="flex flex-col gap-4	justify-end ">
          <div className="flex flex-col gap">
            <Text text={`${name || 'Unknown User'}`} Tag="h6" variant="h6" />
            <Text text={email || ''} className="text-sm text-gray-500 break-all" />
            <Text text={country?.country_name || ''} className="text-gray-500" />
            <Text text={role || ''} className="text-blue-500" />
          </div>
          {extraProfileDropdownMenu?.length && (
            <div className="flex flex-col gap-1">
              <hr />
              {/* {extraProfileDropdownMenu.map((menu: ProfileDropdownMenu) => (
                <div key={menu.label}>
                  <Text text="Settings" Tag="h6" variant="h6" />
                </div>
                ))} */}

              {extraProfileDropdownMenu?.map((menu: ProfileDropdownMenu, index) => (
                <li key={menu.label + index}>
                  <Link
                    to={menu.href || '#'}
                    className="flex items-center gap-2 p-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-blue-500"
                  >
                    {menu.icon}
                    <span>{menu.label}</span>
                  </Link>
                </li>
              ))}
            </div>
          )}

          <div className="flex flex-col gap-4">
            <Button label="Logout" variant="error" onClick={() => logoutUser()} />
          </div>
        </div>
      }
      trigger={
        <div className={classNames('avatar cursor-pointer', !user_image && 'placeholder')}>
          <div className={classNames('w-12 lg:w-8 rounded-full bg-neutral-focus text-neutral-content')}>
            {user_image ? <img src={user_image} alt="username" /> : <Text text={getInitialLetter(`${name || 'U'}`)} />}
          </div>
        </div>
      }
    />
  )
}