import React, { useContext, useState } from "react";
import { Link } from "gatsby";

import HeaderContext from "../../context/headerContext";
import "./index.scss";
import MenuIcon from "../../images/menu.svg";

const Navbar = () => {
	const headerContext = useContext(HeaderContext);
	const [toggleMenu, setToggleMenu] = useState(false);

	const handleShowNavbar = (context) => {
		if (context.isHeaderHidden === true && !toggleMenu) {
			return { background: "transparent" };
		} else {
			return { background: "white" };
		}
	};

	const handleMenu = () => {
		setToggleMenu(!toggleMenu);
	};

	return (
		<div id="navbar-container">
			<nav
				style={handleShowNavbar(headerContext)}
				className={toggleMenu ? "nav-o" : "nav-c"}
			>
				<div className={toggleMenu ? "details-open" : "details"}>
					<Link
						to="/services"
						className={toggleMenu ? "menu-item" : "menu-item-hidden"}
					>
						<span>Services</span>
					</Link>
					<Link
						to="/a-propos"
						className={toggleMenu ? "menu-item" : "menu-item-hidden"}
					>
						<span>L'Association</span>
					</Link>
				</div>
				<div className="title-and-menu">
					<Link id="navbar-title" to="/">
						<span>CLI</span>
					</Link>
					<button className="menu-toggle-container" onClick={handleMenu}>
						<img
							src={MenuIcon}
							className="menu-toggle"
							alt="Menu icon"
							height="30px"
							width="30px"
						/>
					</button>
				</div>
				<Link to="/nous-contacter" id="contact-btn" className="menu-btn">
					<button className="btn">Nous contacter</button>
				</Link>
			</nav>
		</div>
	);
};

export default Navbar;
