import { createRef, useEffect } from 'react'
import NavbarDropDown from '../NavbarDropdown'
import ItemNavbarDropdown from '../ItemNavbarDropdown'
import profileIcon from '../../assets/icons/avatar-white.svg'
import menuIcon from '../../assets/icons/menu-bar.svg'
import {nutrixLogoWhite} from '../../assets/icons/remastered'
import Language from '../../assets/icons/language.svg'
const Navbar = () => {

    const userDropdown = createRef<HTMLDivElement>()

    useEffect(() => {
        document.addEventListener("click", (event: any) => {
            const specifiedElement = document.getElementById("theToggleNav")
            const isClickInside = specifiedElement?.contains(event.target)
            if (!isClickInside) {
                userDropdown?.current?.style.setProperty("display", "none")
            }
        })
    })

    const toggleSideBar = () => {
        const element = document.getElementById("sidebar")
        if (element?.style.left === "0px" && window.innerWidth < 1200) {
            element?.style.setProperty("left", "-250px")
        } else {
            element?.style.setProperty("left", "0px")
        }

    }

    return <div className="navbar">
        <div className="navbar__burguer">
            {
                window.innerWidth < 1200 ?
                    <div id="hamburguer" onClick={() => toggleSideBar()}>
                        <img height={30} width={30} src={menuIcon} alt="" />
                    </div> : ''
            }
        </div>
        <img
            className="navbar__logo"
            src={nutrixLogoWhite}
            alt=''
            onClick={() => { window.location.reload() }}
        />
        <div style={{}}>
            <NavbarDropDown
                icon={Language}
                items={
                    [
                        <ItemNavbarDropdown key={'1'} title="Español" onChange={(event) => { }} />,
                        <ItemNavbarDropdown key={'2'} title="Inglés" onChange={(event) => { }} />,
                        <ItemNavbarDropdown key={'3'} title="Italiano" onChange={(event) => { }} />
                    ]
                }
                id="1"
                
            />
        </div>
        <div>
            <NavbarDropDown
                icon={profileIcon}
                items={ 
                    [
                        <ItemNavbarDropdown key={'4'} title="Settings" onChange={(event) => { }} />,
                        <ItemNavbarDropdown key={'5'} title="Log out" onChange={(event) => { }} />

                    ]
                }
                id="2"
            />
        </div>
    </div>

}

export default Navbar