import React, { useState } from "react"
import styled from "@emotion/styled"
import { Link } from "gatsby"
import { IconContext } from "react-icons"
import { FiMenu } from "react-icons/fi"

import ThemeSwitcher from './theme-switcher'
import stylingGlobals from "../styles/styling-globals"

const NavbarContainer = styled.nav`
  margin: 0;
  padding: 0;
  position: fixed;
  top: 0;
  width: 100%;
  background-color: var(--navbar-background);
  color: var(--navbar-text);
  border-bottom: 1px solid;
  border-color: var(--navbg-border);
  z-index: 100;
  
  a {
    text-decoration: none;
  }
`

const NavbarList = styled.div`
  display: flex;
`
const NavbarLogo = styled.div`
  padding: 15px;
  flex: 1;
`

const VelocityNavbarLogo = styled.div`
  width: 68.5px;
  height: 30px;
  background-image: var(--navbar-logo-url);
  background-size: cover;
  margin-right: .3rem;
`

const NavbarItem = styled.a`
  padding: 18px 10px;
  background-color: rgba(14, 111, 212, ${( {active} ) => active ? '1' : '0'});
  background-repeat: no-repeat;
  transition: background-color .25s 0s;
  color: var(--navbar-text) !important;
  display: block;
  
  &:hover{
    background-color: rgba(14, 111, 212, 1);
  }
  
  @media (max-width: ${stylingGlobals.viewportSizes.phone}) {
    padding: 8px;
    border-bottom: ${({ theme }) => theme.skipMobileNavbarBorders ? 'none' : `1px solid var(--navbg-border)`};
  }
`
const NavbarLink = NavbarItem.withComponent(Link)

const NavbarItems = styled.div`
  display: flex;
  
  @media (max-width: ${stylingGlobals.viewportSizes.phone}) {
    display: none;
  }
`

const MobileNavbarItems = styled.div`
  display: none;
  background-color: var(--navbar-background);
  
  @media (max-width: ${stylingGlobals.viewportSizes.phone}) {
    margin-bottom: -60px;
    display: ${( { mobileShown }) => mobileShown ? 'block' : 'none'};
  }
`

const NavbarExpand = styled.div`
  padding: 18px 10px 0 10px;
  
  @media (min-width: ${stylingGlobals.viewportSizes.phone}) {
    display: none;
  }
`

function NavbarItemContents({ location, onMobileClick }) {
  return <>
    <NavbarLink to={"/wiki"} active={!!location.pathname.startsWith("/wiki")} onClick={onMobileClick}>Documentation</NavbarLink>
    <NavbarLink to={"/downloads"} active={location.pathname.startsWith("/downloads")} onClick={onMobileClick}>Downloads</NavbarLink>
    <NavbarItem href={"https://forums.papermc.io/"} onClick={onMobileClick}>Forums</NavbarItem>
    <NavbarItem href={"https://discord.gg/papermc"} onClick={onMobileClick}>Discord</NavbarItem>
    <NavbarItem href={"https://github.com/PaperMC/Velocity"} onClick={onMobileClick}>GitHub</NavbarItem>
  </>
}

export default function Navbar({ location, themeName, setThemeName }) {
  const [ mobileMenuExpanded, setMobileMenuExpanded ] = useState(false)

  function flipExpanded() {
    setMobileMenuExpanded(!mobileMenuExpanded)
  }

  return (
    <NavbarContainer>
      <NavbarList>
        <NavbarLogo>
          <Link
            to={"/"}
            css={{
              display: 'flex',
              flexDirection: 'row',
              alignItems: 'center',
              color: `var(--navbar-text) !important`,
              fontWeight: 'bold'
            }
          }>
            <VelocityNavbarLogo />
            <span>Velocity</span>
          </Link>
        </NavbarLogo>

        <NavbarExpand onClick={flipExpanded}>
          <IconContext.Provider value={{ size: "16px" }}>
            <FiMenu />
          </IconContext.Provider>
        </NavbarExpand>

        <NavbarItems>
          <NavbarItemContents location={location} />
          <div css={{ padding: '15px 10px' }}>
            <ThemeSwitcher themeName={themeName} setThemeName={setThemeName} />
          </div>
        </NavbarItems>
      </NavbarList>

      <MobileNavbarItems mobileShown={mobileMenuExpanded}>
        <NavbarItemContents location={location} onMobileClick={flipExpanded} />
      </MobileNavbarItems>
    </NavbarContainer>
  )
}