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

export function Navbar() {
  const isAuthenticated = useSelector<RootState>(state => state.auth.isAuthenticated);

  const [ isActive, setActive ] = useState(false);

  const toggleMenu = () => {
    setActive(active => !active);
  };
  
  return (
    <nav className="navbar" 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-end">
            <div className="navbar-item">
              <div className="buttons">
              {
                isAuthenticated ?
                <Fragment>
                  <Link to="/profile" className="button">
                    <span className="icon">
                      <i className="fas fa-user"></i>
                    </span>
                  </Link>
                  <a className="button" href={Config.logoutURL}>
                    <span className="icon">
                      <i className="fas fa-sign-out-alt"></i>
                    </span>
                  </a>
                </Fragment> :
                <a className="button" href={Config.loginURL}>
                  <span className="icon">
                    <i className="fas fa-sign-in-alt"></i>
                  </span>
                </a>
              }
              </div>
            </div>
          </div>
        </div>
      </div>
    </nav>
  );
};