Notes

import React, { useState } from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import { useMsal, useIsAuthenticated } from "@azure/msal-react";
import logo from '../../Assets/Icon/QBELogo.svg';
import cart from '../../Assets/Icon/ShoppingCartLight.svg';
import user from '../../Assets/Icon/UserAccountCircleLight.svg';
import UserDropdown from '../../Pages/Modals/UserDropdown';
import CartPopUp from "../../Pages/Cart/CartPopUp";
import './Header.css';

const Header = ({ cartItems }) => {
const [isPopupOpen, setPopupOpen] = useState(false);
const [isEmptyPopupOpen, setEmptyPopupOpen] = useState(false);
const [isTwoitemcartOpen, setTwoitemcartOpen] = useState(false);
const [isUserDropdownOpen, setUserDropdownOpen] = useState(false);
const [isDropdownHovered, setDropdownHovered] = useState(false); // New state to track hover

const isAuthenticated = useIsAuthenticated();
const navigate = useNavigate();
const location = useLocation();
const currentPath = location.pathname;
const { instance } = useMsal();

const onClickLogout = async () => {
try {
await instance.logoutPopup();
handleCloseDropdown();
navigate("/");
} catch (error) {
console.error("Logout failed:", error);
}
};

const handleCartClick = () => {
setPopupOpen(true);
};

const handleClosePopup = () => {
setPopupOpen(false);
};

const handleEmptyClosePopup = () => {
setEmptyPopupOpen(false);
};

const handleOnAddItem = () => {
setPopupOpen(true);
setEmptyPopupOpen(false);
};

const handleOpenTwoItemCart = () => {
setTwoitemcartOpen(true);
setPopupOpen(false);
};

const handleCloseTwoItemCart = () => {
setTwoitemcartOpen(false);
};

const handleNavigation = (path) => {
handleCloseDropdown();
navigate(path);
};

const handleMouseEnterUserIcon = () => {
setUserDropdownOpen(true);
};

const handleMouseLeaveUserIcon = () => {
if (!isDropdownHovered) {
setUserDropdownOpen(false);
}
};

const handleMouseEnterDropdown = () => {
setDropdownHovered(true);
};

const handleMouseLeaveDropdown = () => {
setDropdownHovered(false);
setUserDropdownOpen(false);
};

return (
<>
{isAuthenticated && (
<>
<header className="header">
<div className="qbe-logo-container">
<div className="application-menu">
<button className="transparent-btn">
<img src={logo} alt="Company Logo" className="logo-img" />
</button>
</div>
<p
className="header-supportpage"
onClick={() => handleNavigation("SupportHomepage/")}
>
Help & Support
</p>
</div>
<div className="icon-container">
{currentPath !== "/aboutYourself" && (
<vr className="vr-line-dashboard-icons" />
)}
{currentPath !== "/aboutYourself" && (
<button
className="cart-container transparent-btn"
onClick={handleCartClick}
>
<img src={cart} alt="Cart" className="cart-img" />
<span className="cart-item-count">2</span>
</button>
)}
<vr className="vr-line-dashboard-icons" />
<div
className="user-icon-container"
onMouseEnter={handleMouseEnterUserIcon}
onMouseLeave={handleMouseLeaveUserIcon}
>
<button className="transparent-btn">
<img src={user} alt="User Icon" className="user-img" />
</button>
<UserDropdown
currentPath={currentPath}
isOpen={isUserDropdownOpen}
onClose={handleCloseDropdown}
onMouseEnter={handleMouseEnterDropdown}
onMouseLeave={handleMouseLeaveDropdown}
onLogout={onClickLogout}
/>
</div>
</div>
</header>

<CartPopUp isOpen={isPopupOpen} onClose={handleClosePopup} />
</>
)}
{!isAuthenticated && null}
</>
);
};

export default Header;