//import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import React, { useState, useEffect } from 'react';
import { Link, useHistory } from 'react-router-dom';
import { DropdownItem, DropdownMenu, DropdownToggle, Dropdown } from 'reactstrap';
import { useAuth } from '../../context/AuthContext';
import JKProfileAvatar from '../profile/JKProfileAvatar';

const ProfileDropdown = () => {
  const [dropdownOpen, setDropdownOpen] = useState(false);
  const toggle = () => setDropdownOpen(prevState => !prevState);
  const {currentUser, setCurrentUser} = useAuth();
  const history = useHistory();
  //const [cookies, setCookie, removeCookie] = useCookies(['remember_token']);

  const handleLogout = () => {
    setCurrentUser(null);
    console.log("signout...");
  }


  return (
    
    <>
    
    <Dropdown
      nav
      inNavbar
      data-testid="navbarTopProfileDropdown"
      isOpen={dropdownOpen}
      toggle={toggle}
      onMouseOver={() => {
        let windowWidth = window.innerWidth;
        windowWidth > 992 && setDropdownOpen(true);
      }}
      onMouseLeave={() => {
        let windowWidth = window.innerWidth;
        windowWidth > 992 && setDropdownOpen(false);
      }}
    >
      <DropdownToggle nav className="pr-0">
        <JKProfileAvatar url={currentUser.photo_url} className="d-block d-lg-none d-xl-none" />
        <span className="d-none d-lg-block">
          {currentUser && currentUser.name}
        </span>
      </DropdownToggle>
      <DropdownMenu right className="dropdown-menu-card">
        <div className="bg-white rounded-soft py-2">
          <DropdownItem tag={Link} to="/pages/settings">
            My Profile
          </DropdownItem> 
          <DropdownItem onClick={handleLogout}>
            Sign out
          </DropdownItem>
        </div>
      </DropdownMenu>
    </Dropdown>
    </>
  );
};

export default ProfileDropdown;