import Link from 'next/link'
import {
  EllipsisHorizontalIcon,
  BuildingLibraryIcon,
  ArrowTopRightOnSquareIcon,
  ChevronDownIcon,
  CurrencyDollarIcon,
  ChartBarIcon,
  ArrowsRightLeftIcon,
  ArrowTrendingUpIcon,
  MagnifyingGlassIcon,
  BanknotesIcon,
  NewspaperIcon,
  PlusCircleIcon,
  ArchiveBoxArrowDownIcon,
  ExclamationTriangleIcon,
  DocumentTextIcon,
  Squares2X2Icon,
  BookOpenIcon,
  QueueListIcon,
  LockClosedIcon,
  ChartPieIcon,
} from '@heroicons/react/20/solid'
import { useRouter } from 'next/router'
import { useTranslation } from 'next-i18next'
import React, {
  Fragment,
  ReactNode,
  useEffect,
  useLayoutEffect,
  useMemo,
  useRef,
  useState,
} from 'react'
import { Disclosure, Popover, Transition } from '@headlessui/react'
import MangoAccountSummary from './account/MangoAccountSummary'
import { HealthType } from '@blockworks-foundation/mango-v4'
import { useWallet } from '@solana/wallet-adapter-react'
import mangoStore from '@store/mangoStore'
import HealthHeart from './account/HealthHeart'
import useMangoAccount from 'hooks/useMangoAccount'
import { useTheme } from 'next-themes'
import LeaderboardIcon from './icons/LeaderboardIcon'
import { sideBarAnimationDuration } from './Layout'
import { CUSTOM_SKINS, breakpoints } from 'utils/theme'
import { NFT } from 'types'
import { useViewport } from 'hooks/useViewport'
import useLocalStorageState from 'hooks/useLocalStorageState'
import { SIDEBAR_COLLAPSE_KEY } from 'utils/constants'
import { createTransferInstruction } from '@solana/spl-token'
import { PublicKey, TransactionInstruction } from '@solana/web3.js'
import CoinIcon from './icons/CoinIcon'
import PerpIcon from './icons/PerpIcon'
//import { useIsWhiteListed } from 'hooks/useIsWhiteListed'

const set = mangoStore.getState().set

const SideNav = ({ collapsed }: { collapsed: boolean }) => {
  const { t } = useTranslation(['common', 'search'])
  const { connected, publicKey } = useWallet()
  const { theme } = useTheme()
  const group = mangoStore.getState().group
  const activeAccountTab = mangoStore((s) => s.accountPageTab)
  const themeData = mangoStore((s) => s.themeData)
  const nfts = mangoStore((s) => s.wallet.nfts.data)
  const { mangoAccount } = useMangoAccount()
  //const { data: isWhiteListed } = useIsWhiteListed()
  const setPrependedGlobalAdditionalInstructions = mangoStore(
    (s) => s.actions.setPrependedGlobalAdditionalInstructions,
  )

  const router = useRouter()
  const { pathname, query } = router

  const { width } = useViewport()
  const [, setIsCollapsed] = useLocalStorageState(SIDEBAR_COLLAPSE_KEY, false)

  useEffect(() => {
    if (width !== 0 && width < breakpoints['xl']) {
      setIsCollapsed(true)
    }
  }, [width, setIsCollapsed])

  const playAnimation = () => {
    const set = mangoStore.getState().set
    set((s) => {
      s.successAnimation.theme = true
    })
  }

  // fetch nfts when pk changes
  useEffect(() => {
    if (publicKey) {
      set((state) => {
        state.wallet.nfts.initialLoad = true
      })
      const actions = mangoStore.getState().actions
      const connection = mangoStore.getState().connection
      actions.fetchNfts(connection, publicKey)
    }
  }, [publicKey])

  // find all mango skin nfts
  const mangoNfts = useMemo(() => {
    if (!nfts.length) return []
    const mangoNfts: NFT[] = []
    for (const nft of nfts) {
      const collectionAddress = nft?.collectionAddress
      for (const themeKey in CUSTOM_SKINS) {
        if (CUSTOM_SKINS[themeKey] === collectionAddress) {
          mangoNfts.push(nft)
        }
      }
    }
    return mangoNfts
  }, [nfts])

  //mark transactions with used nfts
  useEffect(() => {
    let newInstruction: TransactionInstruction[] = []
    if (mangoNfts.length && theme) {
      const collectionAddress = CUSTOM_SKINS[theme.toLowerCase()]
      const usedNft = mangoNfts.find(
        (nft) => nft.collectionAddress === collectionAddress,
      )
      if (usedNft && publicKey && collectionAddress) {
        newInstruction = [
          createTransferInstruction(
            new PublicKey(usedNft.tokenAccount),
            new PublicKey(usedNft.tokenAccount),
            publicKey,
            1,
          ),
        ]
      }
    }
    setPrependedGlobalAdditionalInstructions(newInstruction)
  }, [mangoNfts, theme, themeData])

  // find sidebar image url from skin nft for theme
  const sidebarImageUrl = useMemo(() => {
    if (!theme) return themeData.sideImagePath
    const collectionAddress = CUSTOM_SKINS[theme.toLowerCase()]
    if (collectionAddress && mangoNfts.length) {
      const attributes = mangoNfts.find(
        (nft) => nft.collectionAddress === collectionAddress,
      )?.json?.attributes
      const sidebarImageUrl = attributes
        ? attributes[0].value || themeData.sideImagePath
        : ''
      return sidebarImageUrl
    }
    return themeData.sideImagePath
  }, [mangoNfts, theme, themeData])

  return (
    <>
      <div
        className={`transition-all duration-${sideBarAnimationDuration} ${
          collapsed ? 'w-[64px]' : 'hide-scroll w-[200px] overflow-y-auto'
        } border-r border-th-bkg-3 bg-th-bkg-1 bg-contain`}
        // style={
        //   collapsed
        //     ? { backgroundImage: `url(${themeData.sideTilePath})` }
        //     : { backgroundImage: `url(${themeData.sideTilePathExpanded})` }
        // }
      >
        {sidebarImageUrl && !collapsed ? (
          <img
            className={`absolute bottom-16 h-auto w-full shrink-0`}
            onClick={() => playAnimation()}
            src={sidebarImageUrl}
            alt="next"
          />
        ) : null}
        <div className="flex h-screen flex-col justify-between">
          <div className="mb-2">
            <Link href={'/'} shallow={true} passHref legacyBehavior>
              <div
                className={`items-center transition-all duration-${sideBarAnimationDuration} ease-in-out ${
                  collapsed ? '' : 'justify-start'
                } pb-1 pl-3`}
              >
                <div
                  className={`flex h-16 shrink-0 cursor-pointer items-center bg-th-bkg-1`}
                >
                  <img
                    className={`h-9 w-9 shrink-0`}
                    src={themeData.logoPath}
                    alt="logo"
                  />
                  <Transition
                    show={!collapsed}
                    as={Fragment}
                    enter="transition-all ease-in duration-200"
                    enterFrom="opacity-50"
                    enterTo="opacity-100"
                    leave="transition-all ease-out duration-200"
                    leaveFrom="opacity-100"
                    leaveTo="opacity-0"
                  >
                    <span className={`ml-3 font-display text-lg text-th-fgd-1`}>
                      {themeData.platformName}
                    </span>
                  </Transition>
                </div>
              </div>
            </Link>
            <div className="flex flex-col items-start">
              {/* <MenuItem
                active={pathname === '/'}
                collapsed={collapsed}
                icon={<CurrencyDollarIcon className="h-5 w-5" />}
                title={t('account')}
                pagePath="/"
              /> */}
              <ExpandableMenuItem
                active={pathname === '/'}
                collapsed={collapsed}
                icon={<ChartPieIcon className="h-5 w-5" />}
                title={t('account')}
              >
                <MenuItem
                  active={
                    pathname === '/' &&
                    ((!!query?.view && query.view.includes('overview')) ||
                      (activeAccountTab === 'overview' && !query?.view))
                  }
                  collapsed={false}
                  icon={<Squares2X2Icon className="h-4 w-4" />}
                  title={t('overview')}
                  pagePath="/?view=overview"
                  hideIconBg
                />
                <MenuItem
                  active={
                    pathname === '/' &&
                    ((!!query?.view && query.view.includes('balances')) ||
                      (activeAccountTab === 'balances' && !query?.view))
                  }
                  collapsed={false}
                  icon={<CurrencyDollarIcon className="h-4 w-4" />}
                  title={t('balances')}
                  pagePath="/?view=balances"
                  hideIconBg
                />
                <MenuItem
                  active={
                    pathname === '/' &&
                    ((!!query?.view && query.view.includes('positions')) ||
                      (activeAccountTab === 'trade:positions' && !query?.view))
                  }
                  collapsed={false}
                  icon={<PerpIcon className="h-4 w-4" />}
                  title={t('trade:positions')}
                  pagePath="/?view=positions"
                  hideIconBg
                />
                <MenuItem
                  active={
                    pathname === '/' &&
                    ((!!query?.view && query.view.includes('orders')) ||
                      (activeAccountTab === 'trade:orders' && !query?.view))
                  }
                  collapsed={false}
                  icon={<QueueListIcon className="h-4 w-4" />}
                  title={t('trade:orders')}
                  pagePath="/?view=orders"
                  hideIconBg
                />
                <MenuItem
                  active={
                    pathname === '/' &&
                    ((!!query?.view && query.view.includes('unsettled')) ||
                      (activeAccountTab === 'trade:unsettled' && !query?.view))
                  }
                  collapsed={false}
                  icon={<LockClosedIcon className="h-4 w-4" />}
                  title={t('trade:unsettled')}
                  pagePath="/?view=unsettled"
                  hideIconBg
                />
                <MenuItem
                  active={
                    pathname === '/' &&
                    ((!!query?.view && query.view.includes('history')) ||
                      (activeAccountTab === 'history' && !query?.view))
                  }
                  collapsed={false}
                  icon={<BookOpenIcon className="h-4 w-4" />}
                  title={t('history')}
                  pagePath="/?view=history"
                  hideIconBg
                />
              </ExpandableMenuItem>
              <MenuItem
                active={pathname === '/swap'}
                collapsed={collapsed}
                icon={<ArrowsRightLeftIcon className="h-5 w-5" />}
                title={t('swap')}
                pagePath="/swap"
              />
              <ExpandableMenuItem
                active={pathname === '/trade'}
                collapsed={collapsed}
                icon={<ArrowTrendingUpIcon className="h-5 w-5" />}
                title={t('trade')}
              >
                <MenuItem
                  active={
                    pathname === '/trade' &&
                    ((!!query?.name && query.name.includes('PERP')) ||
                      !query?.name)
                  }
                  collapsed={false}
                  icon={<PerpIcon className="h-4 w-4" />}
                  title={t('perp')}
                  pagePath="/trade?name=SOL-PERP"
                  hideIconBg
                />
                <MenuItem
                  active={
                    pathname === '/trade' &&
                    !!query?.name &&
                    !query.name.includes('PERP')
                  }
                  collapsed={false}
                  icon={<CoinIcon className="h-4 w-4" />}
                  title={t('spot')}
                  pagePath="/trade?name=SOL/USDC"
                  hideIconBg
                />
              </ExpandableMenuItem>
              <MenuItem
                active={pathname === '/borrow'}
                collapsed={collapsed}
                icon={<BanknotesIcon className="h-5 w-5" />}
                title={t('borrow')}
                pagePath="/borrow"
              />
              <MenuItem
                active={pathname === '/stats'}
                collapsed={collapsed}
                icon={<ChartBarIcon className="h-5 w-5" />}
                title={t('stats')}
                pagePath="/stats"
              />
              <MenuItem
                active={pathname === '/leaderboard'}
                collapsed={collapsed}
                icon={<LeaderboardIcon className="h-5 w-5" />}
                title={t('leaderboard')}
                pagePath="/leaderboard"
              />
              {/* {isWhiteListed ? (
              <MenuItem
                active={pathname === '/nft'}
                collapsed={collapsed}
                icon={<PhotoIcon className="h-5 w-5" />}
                title={t('nft-market')}
                pagePath="/nft"
              />
            ) : null} */}
              <ExpandableMenuItem
                collapsed={collapsed}
                icon={<EllipsisHorizontalIcon className="h-5 w-5" />}
                title={t('more')}
              >
                <MenuItem
                  active={pathname === '/search'}
                  collapsed={false}
                  icon={<MagnifyingGlassIcon className="h-4 w-4" />}
                  title={t('search:search-accounts')}
                  pagePath="/search"
                  hideIconBg
                />
                <MenuItem
                  active={pathname === '/governance/list'}
                  collapsed={false}
                  icon={<PlusCircleIcon className="h-4 w-4" />}
                  title={t('common:list-market-token')}
                  pagePath="/governance/list"
                  hideIconBg
                />
                <MenuItem
                  active={pathname === '/governance/vote'}
                  collapsed={false}
                  icon={<ArchiveBoxArrowDownIcon className="h-4 w-4" />}
                  title={t('common:vote')}
                  pagePath="/governance/vote"
                  hideIconBg
                />
                <MenuItem
                  collapsed={false}
                  icon={<DocumentTextIcon className="h-4 w-4" />}
                  title={t('documentation')}
                  pagePath="https://docs.mango.markets"
                  hideIconBg
                  isExternal
                />
                <MenuItem
                  collapsed={false}
                  icon={<BuildingLibraryIcon className="h-4 w-4" />}
                  title={t('governance')}
                  pagePath="https://dao.mango.markets"
                  hideIconBg
                  isExternal
                />
                {/* <MenuItem
                collapsed={false}
                icon={<ClipboardDocumentIcon className="h-5 w-5" />}
                title={t('feedback-survey')}
                pagePath="https://forms.gle/JgV4w7SJ2kPH89mq7"
                hideIconBg
                isExternal
              /> */}
                <MenuItem
                  collapsed={false}
                  icon={<NewspaperIcon className="h-4 w-4" />}
                  title={t('terms-of-use')}
                  pagePath="https://docs.mango.markets/legal"
                  hideIconBg
                  isExternal
                />
                <MenuItem
                  collapsed={false}
                  icon={<ExclamationTriangleIcon className="h-4 w-4" />}
                  title={t('risks')}
                  pagePath="https://docs.mango.markets/mango-markets/risks"
                  hideIconBg
                  isExternal
                />
              </ExpandableMenuItem>
            </div>
          </div>
          <div className="z-10 mt-2 border-t border-th-bkg-3 bg-th-bkg-1">
            <ExpandableMenuItem
              collapsed={collapsed}
              icon={
                <HealthHeart
                  health={
                    group && mangoAccount
                      ? mangoAccount.getHealthRatioUi(group, HealthType.maint)
                      : 0
                  }
                  size={32}
                />
              }
              panelTitle={mangoAccount?.name ? mangoAccount.name : t('account')}
              title={
                <div className="w-24 text-left">
                  <p className="mb-0.5 whitespace-nowrap text-xs">
                    {t('account')}
                  </p>
                  <p className="truncate whitespace-nowrap text-sm font-bold text-th-fgd-1">
                    {mangoAccount
                      ? mangoAccount.name
                      : connected
                      ? 'No Account'
                      : 'Connect'}
                  </p>
                </div>
              }
              alignBottom
              hideIconBg
            >
              <div className="px-4 py-2">
                <MangoAccountSummary />
              </div>
            </ExpandableMenuItem>
          </div>
        </div>
      </div>
    </>
  )
}

export default SideNav

const MenuItem = ({
  active,
  collapsed,
  icon,
  onClick,
  title,
  pagePath,
  hideIconBg,
  isExternal,
}: {
  active?: boolean
  collapsed: boolean
  icon?: ReactNode
  onClick?: () => void
  title: string
  pagePath: string
  hideIconBg?: boolean
  isExternal?: boolean
}) => {
  const { theme } = useTheme()
  return (
    <Link
      href={pagePath}
      onClick={onClick ? onClick : undefined}
      shallow={true}
      className={`flex cursor-pointer pl-4 focus:outline-none focus-visible:text-th-active md:hover:text-th-active ${
        active
          ? 'text-th-active'
          : theme === 'Light'
          ? 'text-th-fgd-3'
          : 'text-th-fgd-2'
      } ${hideIconBg ? 'py-1' : 'py-1.5 xl:py-2'}`}
      target={isExternal ? '_blank' : ''}
      rel={isExternal ? 'noopener noreferrer' : ''}
      title={title}
    >
      <div className="flex w-full items-center">
        <div className="flex items-center">
          {icon ? (
            <div
              className={
                hideIconBg
                  ? ''
                  : `flex h-8 w-8 items-center justify-center rounded-full ${
                      theme === 'Light' ? 'bg-th-bkg-2' : 'bg-th-bkg-3'
                    }`
              }
            >
              {icon}
            </div>
          ) : null}
          <Transition
            show={!collapsed}
            as={Fragment}
            enter={`transition-all ease-in duration-${sideBarAnimationDuration}`}
            enterFrom="opacity-50"
            enterTo="opacity-100"
            leave={`transition-all ease-out duration-${sideBarAnimationDuration}`}
            leaveFrom="opacity-100"
            leaveTo="opacity-0"
          >
            <span className="ml-3 whitespace-nowrap 2xl:text-base">
              {title}
            </span>
          </Transition>
        </div>
        {isExternal ? (
          <ArrowTopRightOnSquareIcon className="ml-2 h-3 w-3" />
        ) : null}
      </div>
    </Link>
  )
}

export const ExpandableMenuItem = ({
  active,
  alignBottom,
  children,
  collapsed,
  hideIconBg,
  icon,
  panelTitle,
  title,
}: {
  active?: boolean
  alignBottom?: boolean
  children: ReactNode
  collapsed: boolean
  hideIconBg?: boolean
  icon: ReactNode
  panelTitle?: string
  title: string | ReactNode
}) => {
  const { theme } = useTheme()
  const themeData = mangoStore((s) => s.themeData)

  const [isOverButton, setIsOverButton] = useState(false)
  const [isOverList, setIsOverList] = useState(false)
  const [isOpen, setIsOpen] = useState(false)
  const [isTouchInput, setIsTouchInput] = useState(false)
  const [hasClicked, setHasClicked] = useState(false)
  const button = useRef<HTMLButtonElement>(null)

  useLayoutEffect(() => {
    if (
      isOpen &&
      !isOverButton &&
      !isOverList &&
      !isTouchInput &&
      button?.current
    ) {
      button.current.click()
      setIsOpen(false)
    } else if (
      !isOpen &&
      (isOverButton || isOverList) &&
      !isTouchInput &&
      button?.current
    ) {
      button.current.click()
      setIsOpen(true)
    }
  }, [isOverButton, isOverList])

  useEffect(() => {
    setIsTouchInput(false)
    setHasClicked(false)
  }, [hasClicked])

  // hack for weird bug where isOverList is true when it shouldn't be (only in account nav => click link in menu then overview tab and quickly hover account main menu icon)
  useEffect(() => {
    if (isOverButton && isOverList) {
      setIsOverList(false)
    }
  }, [isOverButton, isOverList])

  return collapsed ? (
    <Popover className={`relative z-30 ${alignBottom ? '' : 'py-2 pl-4'}`}>
      <Popover.Button
        className={`${
          active
            ? 'text-th-active'
            : theme === 'Light'
            ? 'text-th-fgd-3'
            : 'text-th-fgd-2'
        } ${
          alignBottom
            ? 'focus-visible:bg-th-bkg-3'
            : 'w-[48px] focus-visible:text-th-active'
        } md:hover:text-th-active`}
        ref={button}
        onTouchStart={() => {
          setIsTouchInput(true)
        }}
        onMouseEnter={() => {
          setIsOverButton(true)
        }}
        onMouseLeave={() => {
          setIsOverButton(false)
        }}
        onClick={() => {
          setHasClicked(true)
          setIsOpen(!isOpen)
        }}
        onKeyDown={() => {
          setIsOpen(!isOpen)
        }}
        title={`${title}`}
      >
        <div
          className={` ${
            hideIconBg
              ? ''
              : `flex h-8 w-8 items-center justify-center rounded-full ${
                  theme === 'Light' ? 'bg-th-bkg-2' : 'bg-th-bkg-3'
                }`
          } ${
            alignBottom
              ? 'flex h-[64px] w-[64px] items-center justify-center hover:bg-th-bkg-2'
              : ''
          }`}
        >
          {icon}
        </div>
      </Popover.Button>
      <Transition
        show={isOpen}
        as={Fragment}
        enter="transition ease-out duration-200"
        enterFrom="opacity-0"
        enterTo="opacity-100"
        leave="transition ease-in duration-200"
        leaveFrom="opacity-100"
        leaveTo="opacity-0"
      >
        <Popover.Panel
          className={`absolute left-[64px] z-20 w-56 rounded-md rounded-l-none bg-th-bkg-1 focus:outline-none ${
            alignBottom ? 'bottom-0 rounded-b-none border-b-0 p-0' : 'top-0'
          }`}
          onMouseEnter={() => {
            setIsOverList(true)
          }}
          onMouseLeave={() => {
            setIsOverList(false)
          }}
        >
          <div
            className={`rounded-md rounded-l-none bg-th-bkg-2 ${
              alignBottom ? 'pb-2 pt-4' : 'py-2'
            }`}
          >
            <div className="flex items-center justify-between pl-4 pr-2">
              {panelTitle ? (
                <h3 className="text-sm font-bold">{panelTitle}</h3>
              ) : null}
            </div>
            <div onClick={() => setIsOpen(false)}>{children}</div>
          </div>
        </Popover.Panel>
      </Transition>
    </Popover>
  ) : (
    <Disclosure>
      {({ open }) => (
        <>
          <Disclosure.Button
            className={`flex w-full items-center justify-between rounded-none px-4 py-2 focus-visible:text-th-active md:hover:text-th-active ${
              active ? 'text-th-active' : ''
            } ${
              alignBottom
                ? 'h-[64px] focus-visible:bg-th-bkg-3 md:hover:bg-th-bkg-2'
                : ''
            }`}
          >
            <div className="flex items-center">
              <div
                className={
                  hideIconBg
                    ? ''
                    : 'flex h-8 w-8 items-center justify-center rounded-full bg-th-bkg-3'
                }
              >
                {icon}
              </div>
              <Transition
                appear={true}
                show={!collapsed}
                as={Fragment}
                enter={`transition-all ease-in duration-${sideBarAnimationDuration}`}
                enterFrom="opacity-50"
                enterTo="opacity-100"
                leave={`transition-all ease-out duration-${sideBarAnimationDuration}`}
                leaveFrom="opacity-100"
                leaveTo="opacity-0"
              >
                <span className="ml-3 truncate 2xl:text-base">{title}</span>
              </Transition>
            </div>
            <ChevronDownIcon
              className={`${open ? 'rotate-180' : 'rotate-0'} h-5 w-5 shrink-0`}
            />
          </Disclosure.Button>
          <Transition
            as={Fragment}
            enter={`transition-all ease-in duration-${sideBarAnimationDuration}`}
            enterFrom="opacity-100 max-h-0"
            enterTo="opacity-100 max-h-80"
            leave={`transition-all ease-out duration-${sideBarAnimationDuration}`}
            leaveFrom="opacity-100 max-h-80"
            leaveTo="opacity-0 max-h-0"
          >
            <Disclosure.Panel
              className={`w-full overflow-hidden ${
                themeData.sideImagePath ? 'z-10 bg-th-bkg-1 py-2' : ''
              }`}
            >
              <div className={`${!alignBottom ? 'ml-3' : ''}`}>{children}</div>
            </Disclosure.Panel>
          </Transition>
        </>
      )}
    </Disclosure>
  )
}