import React, { useEffect, createRef } from 'react'
import {apple, dinner, peso, evaluacion, home, patient, tca, nutrixLogoWhite} from '../../../assets/icons/remastered/index'
import SidebarButton from '../../../types/SidebarButton'
import SidebarItem from './SidebarItem'



interface sidebarProps {
  //buttons: Array<SidebarButton>
}

const Sidebar = ({ }: sidebarProps) => {

  const sidebar = createRef<HTMLDivElement>()
  // If the window is less than 1200 pixels wide, collapses the sidebar.
  const closeOnSmall = () => {
    if (window.innerWidth < 1200) {close()}
  }

  // Sets the sidebar's width to 240 pixels wide.
  const setNormalSize = () => {
    sidebar?.current?.style.setProperty("width", "240px")
  }

  // Sets the sidebar's width to 60 pixels wide.
  const reduceSize = () => {
    sidebar?.current?.style.setProperty("width", "60px")
  }

  // Moves the sidebar to the left side of the screen
  const open = () => {
    sidebar?.current?.style.setProperty("left", "0px")
  }

  // Hides the sidebar
  const close = () => {
    sidebar?.current?.style.setProperty("left", "-250px")
  }

  // If the window's width changes, changes the sidebar's width as well.
  const windowResized = () => {
    window.innerWidth > 1200 ? open() : close()

    window.innerWidth >= 1201 && window.innerWidth <= 1550 ? reduceSize() : setNormalSize()
  }

  // Returns true if the window is between 1201 and 1550 pixels wide.
  const showName = () => {
    return (window.innerWidth >= 1201 && window.innerWidth <= 1550)
  }
  useEffect(() => {
    window.addEventListener("resize", windowResized)
    windowResized()
  })
  

  return (
    <nav ref={sidebar} id="sidebar">
      <div className="sidebar">
        <div className="sidebar__block" onClick={closeOnSmall}>
          <div className="items navigation-link">
            
            <SidebarItem route={''} icon={home} title="inicio" index={1} showTitle={showName()}/>
            <SidebarItem route={''} icon={apple} title="alimentos" index={2} showTitle={showName()}/>
            <SidebarItem route={''} icon={tca} title="tca" index={3} showTitle={showName()}/>
            <SidebarItem route={''} icon={patient} title="pacientes" index={4} showTitle={showName()}/>
            
            <div className="profile-item" style={{
                  paddingLeft : showName() ? '12px' : '18px'
                }}>
              <img style={{
                objectFit:'cover',
                borderRadius:'100%'
              }} height={ showName() ? 30 : 60} width={showName() ? 30 : 60} src={'https://images.unsplash.com/photo-1493666438817-866a91353ca9?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8cGVyc29uYXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&w=1000&q=80'}/>
              
              {
                showName() ? '' : <div className="profile-titles">
                  <div className="name">Carter Kenter</div>
                  <div className="link">Cambiar paciente</div>
                </div>  
              }
              
            </div>

            <SidebarItem route={''} icon={dinner} title="dietas" index={5} showTitle={showName()}/>
            <SidebarItem route={''} icon={peso} title="antropometrias" index={6} showTitle={showName()}/>
            <SidebarItem route={''} icon={evaluacion} title="evaluación" index={7} showTitle={showName()}/>
            
          </div>
        </div>
      </div>
      <footer className={showName() ? "dont-show-text" : ''}>
        <div>© Copyright {new Date().getFullYear()} Universidad Europea del Atlántico </div>
      </footer>
    </nav>
  );
}
export default Sidebar