import { useEffect, useState } from 'react'
import Navbar from './Navbar'
import Sidebar from './sidebar/Sidebar'
import home from '../../assets/icons/remastered/home.svg'
import food from '../../assets/icons/remastered/apple.svg'
import tca from '../../assets/icons//remastered/tca.svg'
import patient from '../../assets/icons/remastered/patient.svg'
import utensils from '../../assets/icons/remastered/dinner.svg'
import weight from '../../assets/icons/remastered/weight.svg'
import evalu from '../../assets/icons/remastered/evaluacion.svg'
const buttons = [
    { url: "/index.tsx", icon: home, name: "INICIO" },
    { url: "/index.tsx", icon: food, name: "ALIMENTOS" },
    { url: "/index.tsx", icon: tca, name: "TCA" },
    { url: "/index.tsx", icon: patient, name: "PACIENTES" },
    { url: "/index.tsx", icon: utensils, name: "DIETA" },
    { url: "/index.tsx", icon: weight, name: "ANTROPOMETRÍA" },
    { url: "/index.tsx", icon: evalu, name: "EVALUACIÓN" },
    // { url: "/index.tsx", icon: chartPie, name: "ANALÍTICA" },
    // { url: "/index.tsx", icon: history, name: "HISTORIA CLÍNICA" }
    
]


interface ContentProps {
    children: JSX.Element[] | JSX.Element,
    hideSideBar?: boolean,
    fullDisplay?: boolean
}

const Base = ({children, hideSideBar, fullDisplay}: ContentProps) => {
    
    const [size, setSize] = useState(window.innerWidth)

    useEffect(() => {
        if(hideSideBar){
            const element = document.getElementById('content')
            element?.style.setProperty("left", "0px")

            if(fullDisplay){
                const container = document.getElementById('content')
                container?.style.setProperty("padding", "0")
            }

            //windowResized()
        }
        else{

            windowResized()
            window.addEventListener("resize", windowResized)
        }
        
    },[])
    
    const windowResized = () => {
        
        setSize(window.innerWidth)
        
        if(size >= 1201 && size <= 1550){
            const element = document.getElementById('content')
            element?.style.setProperty("width", "calc(100%-60px)")
            element?.style.setProperty("left", "60px")
        }
    }

    
    
     
    return <>
        <Navbar/>
        {
            !hideSideBar ? 
            <Sidebar/>
        : ''    
        }
        <div id="content" className="c-container">
        {children}
        </div>
    </>
   
}

export default Base