import React, { Fragment, useState } from 'react';
import logo from '../resources/logo.svg';
import { useSelector } from 'react-redux';
import { Config } from '../config';
import { Link } from 'react-router-dom';
import { useUserProfileQuery } from '../gql/queries/profile';
import { WithLoader } from './WithLoader';

export function Navbar() {
  const userProfileQuery = useUserProfileQuery();
  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-end">
            <div className="navbar-item">
              <WithLoader loading={userProfileQuery.loading}>
                <div className="buttons">
                {
                  userProfileQuery.data && userProfileQuery.data.userProfile ?
                  <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>
              </WithLoader>
            </div>
          </div>
        </div>
      </div>
    </nav>
  );
};