import React, { Component } from "react";
import { NavLink } from "react-router-dom";
import classNames from "classnames";
import { withStyles } from "@material-ui/styles";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
  faBars,
  faBox,
  faFlask,
  faHeadSideCough,
  faHome,
} from "@fortawesome/free-solid-svg-icons";

import logo from "../assets/SVG/06.svg";

import styles from "../styles/NavbarStyles";

class Navbar extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isExpanded: false,
    };
    this.handleToggle = this.handleToggle.bind(this);
  }

  handleToggle(e) {
    this.setState(
      { isExpanded: !this.state.isExpanded },
      console.log(this.state.isExpanded)
    );
    // console.log("clicked");
  }

  render() {
    const { classes } = this.props;
    return (
      <div className={classes.navbar}>
        <div className={classes.logo}>
          <img src={logo} alt="logo" />
        </div>
        <nav className={classes.nav}>
          <FontAwesomeIcon
            icon={faBars}
            className={classes.hamburger}
            onClick={this.handleToggle}
          />
          <ul
            className={classNames([classes.navItems], {
              [classes.expand]: this.state.isExpanded,
            })}
          >
            <li className={classes.navItem}>
              <NavLink
                exact
                to="/"
                className={classes.navLinks}
                activeClassName={classes.active}
              >
                <div className={classes.iconBox}>
                  <FontAwesomeIcon icon={faHome} className={classes.icons} />
                  <p>Overview</p>
                </div>
              </NavLink>
            </li>
            <li className={classes.navItem}>
              <NavLink
                exact
                to="/symptoms"
                className={classes.navLinks}
                activeClassName={classes.active}
              >
                <div className={classes.iconBox}>
                  <FontAwesomeIcon
                    icon={faHeadSideCough}
                    className={classes.icons}
                  />
                  <p>Symptoms</p>
                </div>
              </NavLink>
            </li>
            <li className={classes.navItem}>
              <NavLink
                exact
                to="/stay-safe"
                className={classes.navLinks}
                activeClassName={classes.active}
              >
                <div className={classes.iconBox}>
                  <FontAwesomeIcon icon={faFlask} className={classes.icons} />
                  <p>Prevention</p>
                </div>
              </NavLink>
            </li>
            <li className={classes.navItem}>
              <NavLink
                exact
                to="/essentials"
                className={classes.navLinks}
                activeClassName={classes.active}
              >
                <div className={classes.iconBox}>
                  <FontAwesomeIcon icon={faBox} className={classes.icons} />
                  <p>Essentials</p>
                </div>
              </NavLink>
            </li>
          </ul>
        </nav>
      </div>
    );
  }
}

export default withStyles(styles)(Navbar);