import React, { useState, useEffect } from "react"
import { Link } from "gatsby"
import { obtUsuarioStorage } from '../../helpers/obtUsuarioStorage'
import { cerrarSesion } from "../../api"
import { Location } from '@reach/router'
import Logo from "../../../static/logo.png"
import "./navbar.css"

const Navbar = ({ usarTransparencia, currentPage }) => {
  const [scrolled, setScrolled] = React.useState(false);
  const [usuario] = useState(obtUsuarioStorage());

  useEffect(() => {
    window.addEventListener("scroll", handleScroll)
    return () => window.removeEventListener("scroll", handleScroll)
  }, [scrolled])
  let x = ["fixed-top"]
  if (!usarTransparencia || scrolled) {
    x.push("scrolled")
  }

  const handleScroll = () => {
    const offset = window.scrollY
    if (offset > 20) {
      setScrolled(true)
    } else {
      setScrolled(false)
    }
  }

  const salir = (e) => {
    e.preventDefault();
    cerrarSesion()
      .then(res => {
        if (res) {
          localStorage.removeItem('usuario');
        }
      })
  }

  return (
    <div className={x.join(" ")}>
      <div className="contenedor contenedor-navbar">
        <nav className="navbar navbar-expand-md navbar-dark">
          <Link className="navbar-brand logo" to="/">
            <img src={Logo} alt="Logo" title="Logo" />
          </Link>
          <button
            className="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-target="#collapsibleNavbar"
          >
            <span className="navbar-toggler-icon"></span>
          </button>

          <div className="collapse navbar-collapse" id="collapsibleNavbar">
            <ul className="navbar-nav ml-auto mr-5">
              {
                usuario && currentPage && currentPage == '/admin'
                  ?
                  <li className="nav-item">
                    <a onClick={salir}>Salir</a>
                  </li>
                  :
                  <>
                    <li className="nav-item">
                      <Link to="/">Inicio</Link>
                    </li>
                    <li className="nav-item">
                      <Link to="/courses">Cursos</Link>
                    </li>
                    <li className="nav-item">
                      <Link to="/teachers">Docentes</Link>
                    </li>
                  </>
              }
            </ul>
          </div>
        </nav>
      </div>
    </div>
  )
}

export default Navbar