import React, { useState } from 'react'
import styled, { css } from 'styled-components'
import logo from '../../../public/images/logo.png'
import { FaDiscord, FaGithub } from 'react-icons/fa'
import { CgFileDocument } from 'react-icons/cg'
import HamburgerMenu from 'react-hamburger-menu'

function Navbar() {

  const [open, setOpen] = useState(false)
  const [active, setActive] = useState(0)

  const handleClick = e => {
    const index = parseInt(e.target.id, 0);
    if (index !== active) {
      setActive(index);
    }
  };
  return (
    <Nav>
      <Logo src={logo} />
      <HamburgerMenu
        isOpen={open}
        menuClicked={() => setOpen(!open)}
        width={24}
        height={18}
        strokeWidth={2}
        rotate={0}
        color='#fff'
        borderRadius={0}
        animationDuration={0.5}
      />
      <NavMenu open={open}>
        <Li onClick={handleClick} active={active === 0} id={0}>Home</Li>
        <Li onClick={handleClick} active={active === 1} id={1}>NFT Minting dApp</Li>
        <Li onClick={handleClick} active={active === 2} id={2}>YTX Card Game</Li>
        <Li><FaDiscord size={27} color={"#a7a7a7"} /></Li>
        <Li><FaGithub size={27} color={"#a7a7a7"} /></Li>
        <Li><CgFileDocument size={27} color={"#a7a7a7"} /></Li>
        <Li><a href="#!">Connect Wallet</a></Li>
      </NavMenu>
    </Nav>
  )
}

const Nav = styled.div`
  height: 64px;
  width: 100%;
  padding: 0 30px;
  background: #1f1f1f;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  div {
    display: none;
  }
  @media(max-width:891px){
    div {
      display: block;
    }
  }

`

const Logo = styled.img`
  height: 50px;
  width: 50px;
`
const NavMenu = styled.ul`
  display: flex;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0 20px;
  @media(max-width: 891px){
    display: none;
  ${({ open }) => open && css`
    display: flex;
    position: absolute;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    background-color: #1f1f1f;
    border: 1px solid rgb(105, 102, 102);

    top: 64px;
    right: 0;
    height: 40vh;
    width: 300px;
    z-index: 5;
  `}
  }
`

const Li = styled.li`
  list-style: none;
  line-height: 64px;
  padding: 0 16px;
  letter-spacing: 1px;
  font-size: 14px;
  color: #fff;
  cursor: pointer;
  &:not(:last-child){
    display: flex;
    justify-content: center;
    align-items: center;
  }
  &:nth-child(4){
    margin-left: auto;
    @media(max-width: 891px){
      margin-left: 0;
    }
  }
  &:last-child a{
    border: 1px solid #ff8a32;
    padding: 8px 16px;
    text-decoration: none;
    border-radius: 0.3rem;
    color: #fff;
  }
  @media(max-width: 891px){
    &:nth-child(-n+3){
      display: flex;
      justify-content: center;
      align-items: center;
      /* border: 1px solid red; */
      line-height: 0;
      padding: 20px 15px;
    }
    
    &:not(:last-child):hover{
      border-bottom: 2px solid #ff8a32;
    }
  }
  ${({ active }) => active && css`
    font-weight: 900;
    font-size:16px;
  `}
`

export default Navbar