import cn from 'classnames'
import Link from 'next/link'
import { FC, useState } from 'react'
import { useTheme } from 'next-themes'
import { useRouter } from 'next/router'
import s from './DropdownMenu.module.css'
import { Avatar } from '@components/common'
import { Moon, Sun } from '@components/icons'
import { useUI } from '@components/ui/context'

import useLogout from '@bigcommerce/storefront-data-hooks/use-logout'
interface DropdownMenuProps {
  open?: boolean
}

const LINKS = [
  {
    name: 'My Orders',
    href: '/orders',
  },
  {
    name: 'My Profile',
    href: '/profile',
  },
  {
    name: 'My Cart',
    href: '/cart',
  },
]

const DropdownMenu: FC<DropdownMenuProps> = ({ open = false }) => {
  const logout = useLogout()
  const { pathname } = useRouter()
  const { theme, setTheme } = useTheme()
  const [display, setDisplay] = useState(false)
  const { closeSidebarIfPresent } = useUI()

  return (
    <div>
      <button
        className={s.avatarButton}
        onClick={() => setDisplay(!display)}
        aria-label="Menu"
      >
        <Avatar />
      </button>

      {display && (
        <ul className={s.dropdownMenu}>
          {LINKS.map(({ name, href }) => (
            <li key={href}>
              <div>
                <Link href={href}>
                  <a
                    className={cn(s.link, {
                      [s.active]: pathname === href,
                    })}
                    onClick={closeSidebarIfPresent}
                  >
                    {name}
                  </a>
                </Link>
              </div>
            </li>
          ))}
          <li>
            <a
              className={cn(s.link, 'justify-between')}
              onClick={() =>
                theme === 'dark' ? setTheme('light') : setTheme('dark')
              }
            >
              <div>
                Theme: <strong>{theme}</strong>{' '}
              </div>
              <div className="ml-3">
                {theme == 'dark' ? (
                  <Moon width={20} height={20} />
                ) : (
                  <Sun width="20" height={20} />
                )}
              </div>
            </a>
          </li>
          <li>
            <a
              className={cn(s.link, 'border-t border-accents-2 mt-4')}
              onClick={() => logout()}
            >
              Logout
            </a>
          </li>
        </ul>
      )}
    </div>
  )
}

export default DropdownMenu