import {useEffect} from 'react'

import arrowDown from '../assets/icons/down-white.svg'
import Language from '../assets/icons/language.svg'
interface DropDownProps {
    id: string,
    items: JSX.Element[] | JSX.Element,
    icon?:string,
    label?:string
}
const  Dropdown = ({id, items, icon, label} : DropDownProps) => {

     useEffect(() => {
        document.addEventListener("click", (event: any) => {
            const specifiedElement = document.getElementById(id)
            const isClickInside = specifiedElement?.contains(event.target)
            
            if(!isClickInside){
                const element = document.getElementById(`drop-${id}`)
                element?.style.setProperty("display", "none")
            }
        })
    })

    const toggleDropdown = (close = false) => {
        const element = document.getElementById(`drop-${id}`)
        if(!close){
            element?.style.display === "flex" ? 
            element?.style.setProperty("display", "none") :
            element?.style.setProperty("display", "flex")
        }
    }
    
    return <div id={id} onClick={() => toggleDropdown()} className="navbar__user">

        {
            label && <p>{label}</p>
        }
        {
            icon && <img
            src={icon}
            alt=''
            />
        }
        <img
            src={arrowDown}
            alt=''
        />
        <div className="dropdown" id={`drop-${id}`}>
            {items}
        </div>
    </div>
}

export default Dropdown