const rootElement = document.getElementById('header')

function Header() {
 
    let hamburger;
    let navLinks;
    let nav;

    let screenWidth = window.innerWidth;

    React.useEffect(() => {
        hamburger = document.querySelector('.hamburger');
        //navLinks = document.querySelector('.menu-list-container');
        navLinks = document.querySelector('.menu-horizontal');
        nav = document.querySelector('nav');

        screenWidth <= 768 ? setHamburger() : setNavViewLargeSize();

        hamburger.addEventListener('click', function () {
            navLinks.style.display === 'none' ? setCollapseSmallSize() : setHamburger();
        });

        window.addEventListener('resize', function () {
            screenWidth = window.innerWidth;
            screenWidth <= 768 ? setHamburger() : setNavViewLargeSize();
        });

    }, []);

    const setNavViewLargeSize = () => {
        navLinks.style.display = 'flex';
        hamburger.style.display = 'none';

        navLinks.style.flexDirection = "row";
        navLinks.style.justifyContent = "space-around";
        nav.style.height = "50px";

    }
    const setCollapseSmallSize = () => {
        navLinks.style.display = 'block';
        hamburger.style.display = 'block';

        navLinks.style.flexDirection = "column";
        nav.style.height = "440px";
    }

    const setHamburger = () => {
        navLinks.style.display = 'none';
        hamburger.style.display = 'block';
        nav.style.height = "45px";
        hamburger.style.backgroundColor = "#3c64ad";
    }

    return (
        <>
            <header>
                <div id="search_section">
                    <div id="img_container">
                        <img alt="Logo Nuestro desarrollo"
                            src="https://www.medellin.gov.co/ndesarrollo/wp-content/uploads/2021/07/xsellonuestro-e1664252298759-174x77.png.pagespeed.ic.UcxFWCIlvw.webp">
                        </img>

                    </div>
                    <div id="search_container">
                        <div>
                            <input type="text" placeholder="Search here...">
                            </input>

                            <i className="material-icons" >search</i>
                        </div>

                    </div>
                </div>

                <nav>
                    <div className="hamburger">&#9776;</div>


                    <ul class="menu-horizontal">
                        <li>
                            <a href="https://www.medellin.gov.co/ndesarrollo/">Nuestro Desarrollo
                                <i style={{ fontSize: "17px", marginLeft: "2px" }} class="material-icons">expand_more</i></a>
                            <ul class="menu-vertical">
                                <li><a href="https://www.medellin.gov.co/ndesarrollo/?page_id=173">Quines Somos</a></li>
                                <li><a href="https://www.medellin.gov.co/ndesarrollo/?page_id=865">Soñemos Nuestro Desarrollo</a></li>
                                <li><a href="https://www.medellin.gov.co/ndesarrollo/?page_id=3546">Glosario</a></li>
                                <li><a href="https://www.medellin.gov.co/ndesarrollo/?page_id=1250">Preguntas Frecuentes</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="https://www.medellin.gov.co/ndesarrollo/?page_id=10427">Sistema Distrital de Planeación
                                <i style={{ fontSize: "17px", marginLeft: "2px" }} class="material-icons">expand_more</i></a>
                            <ul class="menu-vertical">
                                <li><a href="https://www.medellin.gov.co/ndesarrollo/?page_id=878">Normogramas</a></li>
                                <li><a href="https://www.medellin.gov.co/ndesarrollo/?page_id=883">Subsistemas</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="https://www.medellin.gov.co/ndesarrollo/wp-content/reactPages/PlaneacionDelDesarrollo.html">Planeación del Desarrollo
                                <i style={{ fontSize: "17px", marginLeft: "2px" }} class="material-icons">expand_more</i></a>
                            <ul class="menu-vertical">
                                <li><a href="https://www.medellin.gov.co/ndesarrollo/?page_id=16868">Planeación Regional</a></li>
                                <li><a href="https://www.medellin.gov.co/ndesarrollo/?page_id=16841#">Planeación Distrital</a></li>
                                <li><a href="https://www.medellin.gov.co/ndesarrollo/?page_id=555">Planeación del Desarrollo Local</a></li>
                                <li><a href="https://www.medellin.gov.co/ndesarrollo/?page_id=555">Cápsulas del Saber</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="https://www.medellin.gov.co/ndesarrollo/?page_id=624">BIPL
                                <i style={{ fontSize: "17px", marginLeft: "2px" }} class="material-icons">expand_more</i></a>
                            <ul class="menu-vertical">
                                <li><a href="https://www.medellin.gov.co/ndesarrollo/?page_id=901">Asesoría para la Gestión</a></li>
                                <li><a href="https://www.medellin.gov.co/ndesarrollo/wp-content/reactPages/biplPp.html">Gestión de Proyectos</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="https://www.medellin.gov.co/ndesarrollo/?page_id=1242">Comuniquémonos
                                <i style={{ fontSize: "17px", marginLeft: "2px" }} class="material-icons">expand_more</i></a>
                            <ul class="menu-vertical">
                                <li><a href="https://www.medellin.gov.co/ndesarrollo/?page_id=1246">Agenda</a></li>
                                <li><a href="https://www.medellin.gov.co/ndesarrollo/?page_id=8466">Boletín de Noticias</a></li>
                            </ul>
                        </li>
                        <li style={{ backgroundColor: "#3c64ad" }}>
                            <a href="https://www.medellin.gov.co/ndesarrollo/wp-content/reactPages/seguimiento.html">Seguimiento
                                <i style={{ fontSize: "17px", marginLeft: "2px" }} class="material-icons">expand_more</i></a>
                        </li>
                    </ul>
                </nav>

            </header>
        </>
    )
}

ReactDOM.render(
    <Header />,
    rootElement
)