import React, { Component } from "react";
import { NavLink } from "react-router-dom";
import "../assets/stylesheets/navbar.scss";

export default class NavBar extends Component {
  constructor(props) {
    super(props);
    this.state = { navBackground: { backgroundColor: "transparent" }, hamburger: false };
    document.addEventListener("scroll", (event) => {
      if (window.scrollY < 10)
        this.setState({ navBackground: { backgroundColor: "transparent" } });
      else this.setState({ navBackground: { backgroundColor: "#232323" } });
    });
  }

  toggleHamburger() {
    this.props.hamburgerToggle();
  }

  render() {
    return (
      <nav className="navbar" style={this.state.navBackground}>
        <a id="logo" href="http://localhost:3000">
          <h2 className="navbar__logotext">ITR</h2>
        </a>
        <ul>
          <li>
            <NavLink to="/">Home</NavLink>
          </li>
          <li>
            <NavLink to="/about">About</NavLink>
          </li>
          <li>
            <NavLink to="/projects">Projects</NavLink>
          </li>
          <li>
            <NavLink to="/gallery">Gallery</NavLink>
          </li>
        </ul>
        {/* <NavLink className="nav__login" to="/login">
          Login
        </NavLink> */}
        <div className="nav__placeholder"></div>
        <div className="navbar__hamburger" onClick={() => this.toggleHamburger()}>
          <div className="navbar__hamburger_line"></div>
          <div className="navbar__hamburger_line"></div>
          <div className="navbar__hamburger_line"></div>
        </div>
      </nav>
    );
  }
}
