import React, { useState, useEffect } from "react";
import "./Header.css";
import { Link, NavLink } from "react-router-dom";
import logo from '../../assets/images/logo-light-5.png';

export const Header = () => {
    const [isMenuOpen, setIsMenuOpen] = useState(false);
    const [isSticky, setIsSticky] = useState(false);

    const toggleMenu = () => {
        setIsMenuOpen(!isMenuOpen);
    };

    const closeMenuAndNavigateHome = () => {
        if (isMenuOpen) {
            setIsMenuOpen(false);
        }
    };

    const closeMenu = () => {
        setIsMenuOpen(false);
    };

    const handleLinkClick = () => {
        closeMenu();
    };

    useEffect(() => {
        const handleScroll = () => {
            if (window.scrollY > 50) {
                setIsSticky(true);
            } else {
                setIsSticky(false);
            }
        };

        window.addEventListener("scroll", handleScroll);
        return () => {
            window.removeEventListener("scroll", handleScroll);
        };
    }, []);

    useEffect(() => {
        if (isMenuOpen) {
            document.body.classList.add('body-no-scroll');
        } else {
            document.body.classList.remove('body-no-scroll');
        }
    }, [isMenuOpen]);

    return (
        <header className={`header ${isSticky ? "sticky" : ""}`}>
            <div className="sticky-container">
                <Link to="/" className="logo-container" onClick={closeMenuAndNavigateHome}>
                    <img src={logo} alt="logo" className="logo" />
                </Link>
                <button className={`menu-icon ${isMenuOpen ? "open" : ""}`} onClick={toggleMenu}>
                    <div className="bar"></div>
                    <div className="bar"></div>
                    <div className="bar"></div>
                </button>
            </div>
            <nav className={`nav-links ${isMenuOpen ? "open" : ""}`}>
                <div className="dropdown">
                    <NavLink to="/about" activeClassName="active">About</NavLink>
                    <div className="dropdown-content">
                        <NavLink to="/about/mission" activeClassName="active" onClick={handleLinkClick}>Mission</NavLink>
                        <NavLink to="/about/contacts" activeClassName="active" onClick={handleLinkClick}>Contacts</NavLink>
                    </div>
                </div>
                <div className="dropdown">
                    <NavLink to="/community" activeClassName="active">Community</NavLink>
                    <div className="dropdown-content">
                        <NavLink to="/community/1" activeClassName="active" onClick={handleLinkClick}>Forum</NavLink>
                        <NavLink to="/community/2" activeClassName="active" onClick={handleLinkClick}>Users</NavLink>
                        <NavLink to="/community/3" activeClassName="active" onClick={handleLinkClick}>Map</NavLink>
                    </div>
                </div>
                <div className="dropdown">
                    <NavLink to="/educations" activeClassName="active">Educations</NavLink>
                    <div className="dropdown-content">
                        <NavLink to="/educations/1" activeClassName="active" onClick={handleLinkClick}>Course Upload: Instructors</NavLink>
                        <NavLink to="/educations/2" activeClassName="active" onClick={handleLinkClick}>Course Catalog: Users Access</NavLink>
                    </div>
                </div>
                <div className="dropdown">
                    <NavLink to="/jobs" activeClassName="active">Jobs</NavLink>
                    <div className="dropdown-content">
                        <NavLink to="/jobs/1" activeClassName="active" onClick={handleLinkClick}>Post new job</NavLink>
                        <NavLink to="/jobs/2" activeClassName="active" onClick={handleLinkClick}>Search job</NavLink>

                    </div>
                </div>
                <section className="mobile-buttons">
                    <Link to="/sign_up/register" className="btn btn-dark-gray">Sign up</Link>
                    <Link to="#" className="btn btn-blue">Support</Link>
                </section>
            </nav>

            <section className="right">
                <Link to="/sign_up/register" className="btn btn-dark-gray">Sign up</Link>
                <Link to="#" className="btn btn-blue">Support</Link>
            </section>
        </header>
    );
};