import React, { Fragment, useState } from 'react';
import logo from '../resources/logo.svg';
import { Config } from '../config';
import { Link } from 'react-router-dom';
import { useLoggedIn } from '../hooks/useLoggedIn';

export function Navbar() {
  const loggedIn = useLoggedIn();
  const [ isActive, setActive ] = useState(false);

  const toggleMenu = () => {
    setActive(active => !active);
  };
  
  return (
    <nav className="navbar is-fixed-top" role="navigation" aria-label="main navigation">
      <div className="container is-fluid">
        <div className="navbar-brand">
          <Link className="navbar-item" to="/">
            <img src={logo} style={{marginRight:'5px',width:'28px',height:'28px'}} />
            <h1 className="is-size-4">Daddy</h1>
          </Link>
          <a role="button" 
            className={`navbar-burger ${isActive ? 'is-active' : ''}`}
            onClick={toggleMenu}
            aria-label="menu" 
            aria-expanded="false">
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
          </a>
        </div>
        <div className={`navbar-menu ${isActive ? 'is-active' : ''}`}>
          <div className="navbar-start">
            {
              loggedIn ?
              <React.Fragment>
                <Link to="/dashboard" className="navbar-item">
                  <i className="fa fa-columns"></i>&nbsp;Tableau de bord
                </Link>
                <Link to="/conference" className="navbar-item">
                  <i className="fa fa-users"></i>&nbsp;Conférence
                </Link>
              </React.Fragment> :
              null
            }
          </div>
          <div className="navbar-end">
            <div className="navbar-item">
              <div className="buttons">
                {
                  loggedIn ?
                  <Fragment>
                    <Link to="/profile" className="button">
                      <span className="icon">
                        <i className="fas fa-user"></i>
                      </span>
                      <span>Mon profil</span>
                    </Link>
                    <Link className="button is-warning is-small" to="/logout">
                      <span className="icon">
                        <i className="fas fa-sign-out-alt"></i>
                      </span>
                      <span>Déconnexion</span>
                    </Link>
                  </Fragment> :
                  <a className="button is-primary" href={Config.loginURL}>
                    <span className="icon">
                      <i className="fas fa-sign-in-alt"></i>
                    </span>
                    <span>S'identifier</span>
                  </a>
                }
              </div>
            </div>
          </div>
        </div>
      </div>
    </nav>
  );
};