import React, {Component} from 'react';
import styles from './Navbar.module.css';
import {Link, NavLink} from 'react-router-dom';

function isLoggedIn() {
  const cookies = document.cookie
    .split(';')
    .filter(item => item.trim().startsWith('logedIn='));
  return cookies.length > 0;
}

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

    this.state = {
      loggedIn: isLoggedIn()
    };
  }

  componentDidMount() {
    this.interval = window.setInterval(() => {
      this.setState({loggedIn: isLoggedIn()});
    }, 500);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    return (
      <header>
        <nav
          className={` ${styles.navbar} navbar navbar-dark bg-dark navbar-expand-lg`}
        >
          <div className="container">
            <Link className="navbar-brand mr-5" to="/">
              I <i className={`${styles.red} fas fa-heart fa-xs`}></i> Jokes
            </Link>
            <button
              className="navbar-toggler"
              type="button"
              data-toggle="collapse"
              data-target="#navbarContent"
              aria-controls="navbarContent"
              aria-expanded="false"
              aria-label="Toggle navigation"
            >
              <span className="navbar-toggler-icon"></span>
            </button>
            <div className="collapse navbar-collapse" id="navbarContent">
              <ul className="navbar-nav mr-auto">
                <li className="nav-item ">
                  <NavLink className="nav-link" exact to="/">
                    Home
                  </NavLink>
                </li>
                <li className="nav-item">
                  <NavLink className="nav-link" to="/about">
                    About
                  </NavLink>
                </li>
              </ul>
              <ul className="navbar-nav">
                {this.state.loggedIn ? (
                  <React.Fragment>
                    <NavLink className="nav-link mr-3" to="/account">
                      My account
                    </NavLink>
                    <NavLink className="nav-link" to="/logout">
                      Log out
                    </NavLink>
                  </React.Fragment>
                ) : (
                  <React.Fragment>
                    <NavLink className="nav-link mr-3 " to="/login">
                      Log in
                    </NavLink>
                    <NavLink className="nav-link" to="/signup">
                      Sign up
                    </NavLink>
                  </React.Fragment>
                )}
              </ul>
            </div>
          </div>
        </nav>
      </header>
    );
  }
}

export default Navbar;