import React, { Fragment, useState } from 'react';
import { Config } from '../config';
import { Link } from 'react-router-dom';
import { useUserProfile } from '../gql/queries/user';
import { WithLoader } from './WithLoader';

export function Navbar() {
  const { user, loading } = useUserProfile();
  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="/">
            <h1 className="is-size-4">
              <i className="fa fa-stopwatch mr-1"></i>
              Guesstimate
            </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">
                {
                  user.id ?
                  <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 is-primary" href={Config.loginURL}>
                    <span className="icon">
                      <i className="fas fa-sign-in-alt"></i>
                    </span>
                    <span>Se connecter</span>
                  </a>
                }
              </div>
            </div>
          </div>
        </div>
      </div>
    </nav>
  );
};