import React from 'react';
import logo from '../resources/logo.svg';
import { useSelector } from 'react-redux';
import { RootState } from '../store/reducers/root';
import { Link } from 'react-router-dom';

export function Navbar() {
  const isAuthenticated = useSelector<RootState>(state => state.auth.isAuthenticated);
  
  return (
    <nav className="navbar" role="navigation" aria-label="main navigation">
      <div className="container is-fluid">
        <div className="navbar-brand">
          <a className="navbar-item" href="#/">
            <img src={logo} style={{marginRight:'5px',width:'28px',height:'28px'}} />
            <h1 className="is-size-4">Daddy</h1>
          </a>
          <a role="button" className="navbar-burger" 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">
          <div className="navbar-end">
            <div className="navbar-item">
              {
                isAuthenticated ?
                <Link className="button is-small" to="/oauth2/logout">
                  <span className="icon">
                    <i className="fas fa-sign-out-alt"></i>
                  </span>
                  <span>Se déconnecter</span>
                </Link> :
                <Link className="button is-small" to="/oauth2/login">
                  <span className="icon">
                    <i className="fas fa-sign-in-alt"></i>
                  </span>
                  <span>Se connecter</span>
                </Link>
              }
            </div>
          </div>
        </div>
      </div>
    </nav>
  );
};