import  { useEffect, useState } from 'react'
import arrowlogo from '../assets/icons/down-white.svg'
interface TabType{
    type:"tab"|"select",
    options?:string[],
    view: JSX.Element[],
}
interface TabProp{
    title:string, 
    body:TabType,
}
interface TabsProps {
    headerTabs : TabProp[],
}

const Tabs = ({headerTabs}: TabsProps) => {
    
    const [selected, setSelected] = useState(0)
    const [dropdownSelection, setSelection] = useState(0)
    const [slide, setSlide] = useState('')

    useEffect(() => {

        if(headerTabs[selected].body.type === 'select' && headerTabs[selected].body.options!.length == 0){
            throw Error("La pestaña de tipo select tiene que tener una opción para mostrar la vista")
        }
        else if(headerTabs[selected].body.type === 'tab' && headerTabs[selected].body.view.length > 1 ){
            throw Error("La pestaña de tipo tab tiene que tener una sola vista.")
        }
        
    },[])

    
    const handleItem = (index: any) => {
        setSelected(index)
        if(selected != index){
            if(index > selected){
                setSlide('next')
            }else{
                setSlide('previous')
            }
        }
    }

    const handleIfIsTab = (index : any) => {
        setSelection(index)
    }

    const item = (index:number, content:any) => {
        return <div style={{
            
        }} key={index} className={slide}>{content}</div>
    }

    const toggleDropdown = (index:any) => {
        var close = false
        const element = document.getElementById(`tab-${index}`)
        
        const arrow = document.getElementById(`arrow-${index}`)
        
        if(!close){
            if(element?.style.display === "flex"){
                element?.style.setProperty("display", "none") 
                arrow?.style.setProperty("transform",`rotate(0deg)`)
                arrow?.style.setProperty("transition-duration",`0.10s`)
            }else{
                element?.style.setProperty("display", "flex")
                arrow?.style.setProperty("transform",`rotate(180deg)`)
                arrow?.style.setProperty("transition-duration",`0.10s`)
            }
           
        }
    } 

    const close = (index: any) => {
        const element = document.getElementById(`tab-${index}`)
        element?.style.setProperty("display", "none")
    }
    
    return (
        <div>
            <div className="tabs">
                <ul>
                   {
                        headerTabs.map((element, index) => 
                            <>
                                <li key={index} id={headerTabs[selected].title} onClick={()=> { handleItem(index) }} 
                                    className={`${index === selected ? 'is-active selected' : ''}`} >
                                    {  
                                        headerTabs[index].body.type === 'tab' ? 
                                        <>
                                         <a>{element.title}</a> 
                                        </>
                                        
                                        : 
                                        <>
                                            <a>
                                                {element.title}
                                                <div id={`tab-${index}`} onMouseLeave={()=> close(index)} className="dropdown">
                                                    {
                                                        headerTabs[index].body.options!.map((opt, optIndex) => <div onClick={()=> handleIfIsTab(optIndex)} className="dropdown__item">
                                                            {opt}
                                                        </div>)
                                                    }
                                                </div>
                                            </a>
                                            <img id={`arrow-${index}`} onClick={() => toggleDropdown(index)} height={17} width={17} src={arrowlogo} alt="" />
                                        </>
                                    }
                                </li>
                            </>
                        )
                   }
                </ul>                
            </div>
            <div className="view-tab">
                {item(selected, headerTabs[selected].body.type == 'tab' ? headerTabs[selected].body.view : headerTabs[selected].body.view[dropdownSelection] )}
            </div>
        </div>
    )
} 
export default Tabs