import { useRef } from 'react'
import { Box, Flex, Text } from '../primitives'
import GlobalSearch from './GlobalSearch'
import { useRouter } from 'next/router'
import { useHotkeys } from 'react-hotkeys-hook'
import Link from 'next/link'
import { ConnectWalletButton } from 'components/ConnectWalletButton'
import ThemeSwitcher from './ThemeSwitcher'
import HamburgerMenu from './HamburgerMenu'
import { useTheme } from 'next-themes'
import { useMediaQuery } from 'react-responsive'
import { useMarketplaceChain, useMounted } from '../../hooks'
import { useAccount } from 'wagmi'
import { AccountSidebar } from 'components/navbar/AccountSidebar'

export const NAVBAR_HEIGHT = 71
export const NAVBAR_HEIGHT_MOBILE = 61

const Navbar = () => {
  const { theme } = useTheme()
  const { isConnected } = useAccount()
  const isMobile = useMediaQuery({ query: '(max-width: 960px)' })
  const isMounted = useMounted()
  const { routePrefix } = useMarketplaceChain()

  let searchRef = useRef<HTMLInputElement>(null)

  const router = useRouter()
  useHotkeys('meta+k', (e) => {
    e.preventDefault()
    if (searchRef?.current) {
      searchRef?.current?.focus()
    }
  })

  if (!isMounted) {
    return null
  }

  return isMobile ? (
    <Flex
      css={{
        height: NAVBAR_HEIGHT_MOBILE,
        px: '$4',
        width: '100%',
        borderBottom: '1px solid var(--colors-border)',
        backgroundColor: 'var(--colors-background)',
        zIndex: 999,
        position: 'fixed',
        top: 0,
        left: 0,
        right: 0,
      }}
      align="center"
      justify="between"
    >
      <Box css={{ flex: 1 }}>
        <Flex align="center">
          <Link href={`/${routePrefix}`}>
            <Box css={{ width: 46, cursor: 'pointer' }}>
              <Text css={{ color: 'var(--colors-text)', fontSize: '24px', fontWeight: 'bold' }}>home</Text>
            </Box>
          </Link>
        </Flex>
      </Box>
      <Flex align="center" css={{ gap: '$3' }}>
        <HamburgerMenu key={`${router.asPath}-hamburger`} />
      </Flex>
    </Flex>
  ) : (
    <Flex
      css={{
        height: NAVBAR_HEIGHT,
        px: '$2',
        '@xl': {
          px: '$3',
        },
        width: '100%',
        borderBottom: '1px solid var(--colors-border)',
        backgroundColor: 'var(--colors-background)',
        zIndex: 999,
        position: 'fixed',
        top: 0,
        left: 0,
        right: 0,
      }}
      align="center"
      justify="between"
    >
      <Box
        css={{
          flex: 'unset',
          '@bp1300': {
            flex: 1,
          },
        }}
      >
        <Flex align="center">
          <Link href={`/${routePrefix}`}>
            <Box css={{ cursor: 'pointer' }}>
              <Text css={{ color: 'var(--colors-text)', fontSize: '24px', fontWeight: 'bold' }}>home</Text>
            </Box>
          </Link>
          <Flex
            align="center"
            css={{
              gap: '$5',
              ml: '$5',
            }}
          >
            <Link href={`/${routePrefix}/ethereum/collection/0x21ec102c3688e9ea05605545216ebc9a21461d81`}>
              <Text css={{ color: 'var(--colors-text)', fontSize: '24px', fontWeight: 'bold' }}>gallery</Text>
            </Link>
            <Link href={`https://paint.pepecoin.io/`}>
              <Text css={{ color: 'var(--colors-text)', fontSize: '22px', fontWeight: 'bold' }}>pepepaint app</Text>
            </Link>
            <Link href={`/${routePrefix}/about`}>
              <Text css={{ color: 'var(--colors-text)', fontSize: '24px', fontWeight: 'bold' }}>about?</Text>
            </Link>
          </Flex>
        </Flex>
      </Box>

      <Flex
        css={{
          gap: '$3',
          flex: 'unset',
          '@bp1300': {
            flex: 1,
          },
        }}
        justify="end"
        align="center"
      >
        <GlobalSearch ref={searchRef} placeholder="Search" />
        <ThemeSwitcher />
        {isConnected ? (
          <AccountSidebar />
        ) : (
          <ConnectWalletButton />
        )}
      </Flex>
    </Flex>
  )
}

export default Navbar