import React, { Fragment } from 'react'
import { Popover, Transition } from '@headlessui/react'
import { DocumentTextIcon, MenuIcon, XIcon } from '@heroicons/react/outline'
// import { useActiveWeb3React } from '@hooks/wallet/useActiveWeb3React'
import {
  ANALYTICS_PATH,
  BRIDGE_PATH,
  CONTRACTS_PATH,
  DISCORD_URL,
  DOCS_URL,
  FORUM_URL,
  INTERCHAIN_PATH,
  LANDING_PATH,
  POOLS_PATH,
  PORTFOLIO_PATH,
  STAKE_PATH,
  SWAP_PATH,
  TELEGRAM_URL,
  TWITTER_URL,
} from '@urls'
import { Grid } from '@components/tailwind/Grid'
import { ForumIcon } from '@components/icons/ForumIcon'
import { TwitterIcon } from '@components/icons/TwitterIcon'
import { DiscordIcon } from '@components/icons/DiscordIcon'
import { TelegramIcon } from '@components/icons/TelegramIcon'

import { SynapseLogoSvg } from './SynapseLogoSvg'
import { PageFooter } from './PageFooter'
import { WalletNetworkSection } from './WalletNetworkSection'
import TopBarNavLink from './TopBarNavLink'
import MoreButton from './MoreButton'

export const PageWrapper = ({ children }) => {
  return (
    <div
      className="min-h-screen bg-no-repeat bg-synapse tabular-nums"
      // style={{
      //   background:
      //     'radial-gradient(23.86% 33.62% at 50.97% 47.88%, rgba(255, 0, 255, 0.04) 0%, rgba(172, 143, 255, 0.04) 100%), #111111',
      // }}
    >
      <LandingNav />
      {children}
      <PageFooter />
    </div>
  )
}

export const LandingNav = () => {
  const topBarBtns = <TopBarButtons />
  const mobileBarBtns = <MobileBarButtons />
  const moreInfoBtns = <MoreInfoButtons />
  const socialBtns = <SocialButtons />

  return (
    <Popover className="relative px-8 pt-6">
      <div className="w-full md:flex-1 md:flex md:items-center md:justify-between">
        <div className="flex justify-between w-full py-4 border-b border-none sm:px-20 ">
          <SynapseTitleLogo showText={true} />
          <div className="items-center justify-center -mr-2 sm:flex lg:hidden">
            <Popover.Button
              className={`
                  rounded-lg p-2 inline-flex items-center justify-center
                  text-gray-400 hover:text-gray-500 hover:bg-gray-100
                  dark:hover:text-gray-400 dark:hover:bg-gray-800
                  focus:outline-none
                `}
            >
              <span className="sr-only">Open menu</span>
              <MenuIcon className="w-8 h-8" aria-hidden="true" />
            </Popover.Button>
          </div>
          <Popover.Group
            as="nav"
            className="hidden lg:flex md:space-x-2 md:justify-space-evenly"
          >
            {topBarBtns}
          </Popover.Group>
          <div className="items-center hidden md:ml-4 lg:flex">
            <div className="space-x-2">
              <WalletNetworkSection />
              <Popover className="relative inline-block">
                {({ open }) => (
                  <>
                    <Popover.Button
                      as="div"
                      className={`
                          ${open ? 'text-gray-900' : 'text-purple-800'}
                          group  rounded-md inline-flex items-center  hover:text-gray-900 focus:outline-none
                        `}
                    >
                      <MoreButton open={open} />
                    </Popover.Button>
                    <PopoverPanelContainer className="-translate-x-full">
                      {moreInfoBtns}
                      {socialBtns}
                    </PopoverPanelContainer>
                  </>
                )}
              </Popover>
            </div>
          </div>
        </div>
      </div>

      <Transition
        as={Fragment}
        enter="duration-100 ease-out"
        enterFrom=" opacity-0"
        enterTo=" opacity-100"
        leave="duration-75 ease-in"
        leaveFrom=" opacity-100"
        leaveTo=" opacity-0"
      >
        <Popover.Panel
          focus
          className="absolute inset-x-0 top-0 z-10 transition origin-top-right transform"
        >
          <div className="h-full min-h-full  divide-y bg-[#111111] divide-gray-50 dark:divide-gray-600">
            <div className="px-4 pt-1 pb-6">
              <div className="flex items-center justify-between mt-5 ml-3">
                <SynapseTitleLogo showText={false} />
                <div className="-mr-2">
                  <Popover.Button
                    className={`
                        rounded-lg p-2 inline-flex items-center justify-center
                        text-gray-400 hover:text-gray-500 hover:bg-gray-100
                        dark:hover:text-gray-400 dark:hover:bg-gray-900
                        focus:outline-none
                      `}
                  >
                    <span className="sr-only">Close menu</span>
                    <XIcon className="w-6 h-6" aria-hidden="true" />
                  </Popover.Button>
                </div>
              </div>
              <div className="mt-6">
                <Grid cols={{ xs: 1 }} gap={2} className="py-6">
                  {mobileBarBtns}
                </Grid>
              </div>
            </div>
            <Grid cols={{ xs: 1 }} gap={4} className="px-4 py-4">
              <WalletNetworkSection />
            </Grid>
          </div>
        </Popover.Panel>
      </Transition>
    </Popover>
  )
}

const PopoverPanelContainer = ({ children, className }) => {
  return (
    <Transition
      as={Fragment}
      enter="transition ease-out duration-200"
      enterFrom="opacity-0 translate-y-1"
      enterTo="opacity-100 translate-y-0"
      leave="transition ease-in duration-150"
      leaveFrom="opacity-100 translate-y-0"
      leaveTo="opacity-0 translate-y-1"
    >
      <Popover.Panel
        className={`
          absolute z-10 left-1/2 transform-gpu
          ${className ?? '-translate-x-1/2'}
          mt-3 w-screen max-w-xs sm:px-0
        `}
      >
        <div className="overflow-hidden shadow-xl rounded-xl">
          <div className="relative grid gap-3 bg-white dark:bg-[#111111] px-2.5 py-3  sm:p-2">
            {children}
          </div>
        </div>
      </Popover.Panel>
    </Transition>
  )
}

const TopBarButtons = () => {
  return (
    <>
      <TopBarNavLink to={LANDING_PATH} labelText="About" />
      <TopBarNavLink to={BRIDGE_PATH} labelText="Bridge" />
      <TopBarNavLink to={SWAP_PATH} labelText="Swap" />
      <TopBarNavLink to={POOLS_PATH} labelText="Pools" />
      <TopBarNavLink to={STAKE_PATH} labelText="Stake" />
      <TopBarNavLink to={INTERCHAIN_PATH} labelText={'Interchain Network'} />
      <TopBarNavLink
        className="hidden mdl:block"
        to={ANALYTICS_PATH}
        labelText="Analytics"
      />
    </>
  )
}

const MoreInfoButtons = () => {
  // const { chainId } = useActiveWeb3React()

  return (
    <>
      <MoreInfoItem
        className="mdl:hidden"
        to={ANALYTICS_PATH}
        labelText="Analytics"
        description="See preliminary analytics of the bridge"
      />
      {/* <MoreInfoItem
        to={getBuySynUrl({ chainId })}
        labelText="Buy $SYN"
        description="Trade and add liquidity to $SYN pools"
      /> */}
      <MoreInfoItem
        to={CONTRACTS_PATH}
        labelText="Contracts"
        description="View contract related information such as contract addresses"
      />
      <MoreInfoItem
        to={PORTFOLIO_PATH}
        labelText="Portfolio"
        description="View your portfolio of related assets on this chain"
      />
    </>
  )
}

const SocialButtons = () => {
  return (
    <Grid cols={{ xs: 2, sm: 1 }} gapY={1}>
      <MiniInfoItem
        href={DOCS_URL}
        labelText="Docs"
        icon={
          <DocumentTextIcon
            className={`
              w-4 -ml-1 mr-2  inline group-hover:text-blue-700
              dark:text-blue-700
            `}
          />
        }
      />
      <MiniInfoItem
        href={DISCORD_URL}
        labelText="Discord"
        icon={
          <DiscordIcon
            className={`
              w-4 -ml-1 mr-2  inline group-hover:text-indigo-500
              dark:text-indigo-500
            `}
          />
        }
      />
      <MiniInfoItem
        href={TELEGRAM_URL}
        labelText="Telegram"
        icon={
          <TelegramIcon
            className={`
              w-4 -ml-1 mr-2  inline group-hover:text-blue-400
              dark:text-blue-400
            `}
          />
        }
      />
      <MiniInfoItem
        href={TWITTER_URL}
        labelText="Twitter"
        icon={
          <TwitterIcon
            className={`
              w-4 -ml-1 mr-2  inline group-hover:text-sky-400
              dark:text-sky-400
            `}
          />
        }
      />
      <MiniInfoItem
        href={FORUM_URL}
        labelText="Forum"
        icon={
          <ForumIcon
            className={`
              w-4 -ml-1 mr-2  inline group-hover:text-purple-700
              dark:text-purple-700
            `}
          />
        }
      />
    </Grid>
  )
}

const MobileBarButtons = () => {
  return (
    <>
      <MobileBarItem to={LANDING_PATH} labelText="About" />
      <MobileBarItem to={BRIDGE_PATH} labelText="Bridge" />
      <MobileBarItem to={SWAP_PATH} labelText="Swap" />
      <MobileBarItem to={POOLS_PATH} labelText="Pools" />
      <MobileBarItem to={STAKE_PATH} labelText="Stake" />
      <MobileBarItem to={ANALYTICS_PATH} labelText="Analytics" />
    </>
  )
}

const MobileBarItem = ({ to, labelText }) => {
  return (
    <a
      key={labelText}
      href={to}
      target={to[0] === '/' ? undefined : '_blank'}
      className={`block px-3 pt-2 pb-2 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-900`}
    >
      {to === LANDING_PATH ? (
        <p className="text-2xl font-semibold text-white ">{labelText}</p>
      ) : (
        <p className="text-2xl font-semibold text-white opacity-30 ">
          {labelText}
        </p>
      )}
    </a>
  )
}

interface MoreInfoItemProps {
  to: string
  labelText: string
  className?: string
  description?: string
}

const MoreInfoItem: React.FC<MoreInfoItemProps> = ({
  to,
  labelText,
  description,
  className,
}) => {
  return (
    <a
      key={labelText}
      href={to}
      target={to[0] === '/' ? undefined : '_blank'}
      className={`block px-3 pt-2 pb-2 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-900 ${className}`}
    >
      <p className="text-base font-medium text-white ">{labelText}</p>
      <p className="hidden mt-1 text-sm text-gray-500 md:block dark:text-gray-500">
        {description}
      </p>
    </a>
  )
}

const MiniInfoItem = ({ href, icon, labelText }) => {
  return (
    <a
      key={labelText}
      href={href}
      className="block px-3 pt-1 pb-2 text-sm rounded-lg group hover:bg-gray-50 dark:hover:bg-gray-900"
      target="_blank"
    >
      <div>
        <p className="text-sm text-gray-500 dark:text-gray-500 group-hover:text-gray-600 dark:group-hover:text-gray-400">
          {icon}
          <span className="mt-1">{labelText}</span>
        </p>
      </div>
    </a>
  )
}

export const SynapseTitleLogo = ({ showText }) => {
  return (
    <div>
      <a href={'/'} className="flex">
        <div className="flex items-center flex-shrink-0 py-1 ">
          <div className="mr-2">
            <SynapseLogoSvg />
          </div>
          <span
            className={`
              ${showText ? '' : 'hidden'}
              font-medium text-2xl tracking-wide pl-2
              bg-clip-text text-transparent bg-white
              hover:animate-pulse
              transform transition-all
            `}
          >
            Synapse
          </span>
        </div>
      </a>
    </div>
  )
}