/* eslint-disable jsx-a11y/anchor-is-valid */

import { useState } from 'react'
import {nutrixLogo} from '../assets/icons/remastered'
import VerticalFormData from '../types/VerticalForm'
import Button from './Button'
import Bullet from './Graphs/BulletGraph'
import Gauge from './Graphs/GaugeGraph'
import GroupChart from './Graphs/GroupChartGraph'
import OverlapingBars from './Graphs/OverlappingBarsGraph'
import PieChart from './Graphs/PieChart'
import Login from './login'
import BaseModal from './Modal/BaseModal'
import ModalForm from './Modal/ModalForm'
import ModalIntakes from './Modal/ModalIntakes'
import SearchBar from './SeachBar'
import Table from './Table/Table'
import TableListItem from './Table/TableListItem'
import TextField from './TextField'
import Section from './ui/section'
import VerticalForm from './verticalForm'
import FormData from '../types/FormData';
import TableFormItem from './Table/TableFormItem'
import { FC } from 'react'
import Switch from './switch'
import CheckBox from './checkbox'
import Tabs from './Tabs'
import Header from './Header'
import arrowDown from '../assets/icons/down-black.svg'

export const Edit = () => {
  return (
    <Button variant={"edit"} />
  );
}
const pieData = {

  Fat: 46,
  HC: 75,
  Prot: 54,

}
const data =[{
  recomended: 30,
  value: 20,
},{
  recomended: 20,
  value: 15,
},{
  recomended: 5,
  value: 15,
},{
  recomended: 20,
  value: 40,
}]

const piedata = {
  HC: 55,
  Prot: 89,
  Fat: 77,
}
const UI_Example = () => {
    //const [formData, setformData] = useState<FormData[]>([{ options: ["1", "2", "3", "4"], question1: "", question2: "", question3: "", question4: "", question5: "" }, { options: ["1", "2"], quest1: "", quest2: "", quest3: "", quest4: "", quest5: "", quest6: "", quest7: "", quest8: "", quest9: "", quest15: "", quest12: "", quest11: "", quest13: "", ques14: "", quest10: "", quest21: "", ques2t5: "", quest22: "" }])
    const [medidasCaseras, setMedidasCaseras] = useState<FormData[]>([{ options: ["1", "2", "3", "4"], racion: "", habitual: "false" }]);
    const [show, setShow] = useState(false);
    const handleShow = () => setShow(true);
    const handleClose = () => setShow(false);
    const [showIntakes, setShowIntakes] = useState(false)
    const handleShowIntakes = () => setShowIntakes(true)
    const handleCloseIntakes = () => setShowIntakes(false)
    const [handleSwitch, setHandleSwitch] = useState(false)
    const [checked, setChecked] = useState(false)
    const [optionSelected, setOptionSelected] = useState('')
    
    const errors = [
      {
        "identity_document": [
          "El documento de identidad es requerido."
        ],
        "name": [
          "El nombre del paciente es requerido."
        ],
        "last_name": [
          "El apellido del paciente es requerido."
        ],
        "birthdate": [
          "La fecha de nacimiento es requerida."
        ],
        "gender": [
          "El género del paciente es requerido."
        ],
        "country": [
          "El país de origén es requerido."
        ],
        "image": [
          "La imagen del paciente es requerida."
        ]
      }
    ]
    
    const [items, setItems] = useState<VerticalFormData[]>([
      {
          type: 'Macro',
          test:'',
          corriente:''
      },
      {
          type: 'Macro',
          value1 : '',
          value2 : '',
      },
    ])

    const [menu, setMenu] = useState([
      {
        title:'Graficas',
        idContent:'graficas',
        submenu:{
          show:false,
          items:[
            {
              item:'Grafica de bala',
              idContent:'bullet-graph'
            },
            {
              item:'Grafica de calibre',
              idContent:'gauge-graph'
            },
            {
              item:'Group chart',
              idContent:'group-graph'
            },
            {
              item:'Overlaping chart',
              idContent:'overlaping-graph'
            },
            {
              item:'Pie chart',
              idContent:'pie-graph'
            }
          ]
        }
      },
      {
        title:'Formularios',
        idContent:'formularios',
        submenu:{
          show:false,
          items:[
            {
              item:'Textfield',
              idContent:'texfield-section'
            },
            {
              item:'Searchbar',
              idContent:'searchbar-section'
            },
            {
              item:'Vertical form',
              idContent:'verticalform-section'
            },
            {
              item:'Modal form',
              idContent:'modalform-section'
            },
            {
              item:'Modal ingesta recomendada',
              idContent:'ingestamodal-section'
            },
            {
              item:'Login',
              idContent:'login-section'
            }
          ]
        }
      },
      {
        title:'Tablas',
        idContent:'tablas',
        submenu:{
          show:false,
          items:[
            {
              item:'Tabla general',
              idContent:'tablegeneral-section'
            },
            {
              item:'Tabla formulario',
              idContent:'tableform-section'
            },
          ]
        }
      },
      {
        title:'Botones',
        idContent:'botones',
        submenu:{
          show:false,
          items:[
            {
              item:'Botones generales',
              idContent:'generalbuttons-section'
            },
            {
              item:'Switch',
              idContent:'switch-section'
            },
            {
              item:'Checkbox',
              idContent:'checkbox-section'
            },
          ]
        }
      },
      {
        title:'Layout',
        idContent:'layout',
        submenu:{
          show:false,
          items:[
            {
              item:'Navbar',
              idContent:'navbar-section'
            },
            {
              item:'Sidebar',
              idContent:'sidebar-section'
            },
            {
              item:'Base',
              idContent:'base-section'
            },
            {
              item:'Header',
              idContent:'header-section'
            },
            {
              item:'Tabs',
              idContent:'tabs-section'
            },
          ]
        }
      }
    ])

    const Delete = () => {
      return (
        <Button variant={"delete"} />
      );
    }

    const Select = () => {
      return (
        <select id="Pais:" name="pais" style={{ width: 406, marginBottom: 20 }} >
          <option value="default">Seleccione pais</option>
          <option value="España">España</option>
          <option value="EEUU">EEUU</option>
          <option value="Europa">Europa</option>
          <option value="Italia">Italia</option>
        </select>
      )
    }


    const Text = () => {
      return (
        <TextField />
      );
    }

    const Check: FC<{ index: number }> = ({ index }) => {
      return (
        <input type='checkbox' name={"habitual"} onChange={() => { const checked = medidasCaseras[index].habitual === "false" ? "true" : "false"; setMedidasCaseras([...medidasCaseras, { ...medidasCaseras[index], habitual: checked }]) }}></input>
      );
    }


    const Plus = () => {
      return (
        <Button variant={"add"} onClick={() => (setMedidasCaseras([...medidasCaseras, { options: ["1", "2", "3", "4"], racion: "", habitual: "false" }]))} />
      );
    }
  
    const goToDiv = (id: string) => {
      document.getElementById(id)?.scrollIntoView({
        block:'start',
        behavior: 'smooth'
      })

    }

    const openSubMenu = (index: number) => {
      const open = menu[index].submenu.show = !menu[index].submenu.show
      let newArr = [...menu]
      newArr[index].submenu.show = open
      setMenu(newArr)
      const arrow = document.getElementById(`arrow-${index}`)
      if(!newArr[index].submenu.show){
        arrow?.style.setProperty("transform",`rotate(0deg)`)
        arrow?.style.setProperty("transition-duration",`0.10s`)
      }else{
        arrow?.style.setProperty("transform",`rotate(180deg)`)
                arrow?.style.setProperty("transition-duration",`0.10s`)
      }
    }

    const subTitleItem = (item: any, optionSelected: any) => {
      return <a className={`menu-option ${optionSelected === item.item ? 'selected' : ''}`} onClick={ ()=> {
        setOptionSelected(item.item)
        goToDiv(item.idContent)
      }}>{item.item}</a>
    }

  return <div className="ui">
    <div className="menu-ui">
      <div className="content-title">CONTENIDO</div>
      {
        menu.map((item, index) => {
          return (
            <>
            <div className="menu-title">
              <div style={{
                display:'flex',
                flexDirection:'row'
              }}>
                <a onClick={()=> goToDiv(item.idContent)}>{item.title}</a>
                <img 
                alt="arrow"
                id={`arrow-${index}`}
                className="arrow"
                onClick={()=>openSubMenu(index)} style={{marginLeft:10}} height={15} src={arrowDown}/>
              </div>
              <div className={`subtitle-menu ${item.submenu.show ? 'show' : 'hidden'}`}>
              {
                item.submenu.items.map((itemSubMenu, indexSubMenu)=>{
                  return subTitleItem(itemSubMenu, optionSelected)
                })
              }
              </div>
            </div>
          
            </>
          )
        })
      }
    </div>
    <img src={nutrixLogo} alt="logo nutrix"/> 
    <div className="content-ui">
      <Section id="graficas" title="Graficas"/>
      <Section 
        id="bullet-graph"
        subtitle="Grafica de bala"
        description="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus excepturi placeat, facilis ut ad voluptatem suscipit quisquam dolorem pariatur alias dolore iusto illo perspiciatis, impedit tempore dicta aliquid quod quam?"
        codeExample={`
          <Bullet 
            value={50} 
            target={100} 
            caption="Grafica de bala"
          />
        `}
        componentExample={<Bullet value={50} target={100} caption="Grafica de bala" />}
      />
      <Section 
        id="gauge-graph"
        subtitle="Gráfico de calibre"
        description="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus excepturi placeat, facilis ut ad voluptatem suscipit quisquam dolorem pariatur alias dolore iusto illo perspiciatis, impedit tempore dicta aliquid quod quam?"
        codeExample={`
          <Gauge 
            type="IMC" 
            value={28} 
            caption="Example Caption" 
          />
        `
        }
        componentExample={<Gauge type="IMC" value={28} caption="Example Caption" />}
      />
      <Section
        id="group-graph"
        subtitle="Group chart"
        description="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus excepturi placeat, facilis ut ad voluptatem suscipit quisquam dolorem pariatur alias dolore iusto illo perspiciatis, impedit tempore dicta aliquid quod quam?"
        codeExample={`
          const piedata = {
            HC: 55,
            Prot: 89,
            Fat: 77,
          }
          <GroupChart 
          data={piedata} 
          caption="Example Caption"
          />
        `
        }
        componentExample={ <GroupChart data={piedata} caption="Example Caption"/>}
      />
      <Section 
        id="overlaping-graph"
        subtitle="Overlaping Bars chart"
        description="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus excepturi placeat, facilis ut ad voluptatem suscipit quisquam dolorem pariatur alias dolore iusto illo perspiciatis, impedit tempore dicta aliquid quod quam?"
        codeExample={`
          const data =[{
            recomended: 20,
            value: 15,
          },{
            recomended: 20,
            value: 15,
          },{
            recomended: 20,
            value: 15,
          },{
            recomended: 20,
            value: 15,
          }]
          <OverlapingBars data={data} />
        `
        }
        componentExample={ 
            <OverlapingBars data={data} />
        }
      />
      
      <Section 
        id="pie-graph"
        subtitle="Pie chart"
        description="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus excepturi placeat, facilis ut ad voluptatem suscipit quisquam dolorem pariatur alias dolore iusto illo perspiciatis, impedit tempore dicta aliquid quod quam?"
        codeExample={`
        <PieChart 
        data={pieData} 
        caption="Example Caption"/>
        `
        }
        componentExample={ 
          <PieChart data={pieData} caption="Example Caption"/>
        }
      />
      <Section id="formularios" title="Formularios"/>
      <Section
        id="texfield-section"
        subtitle="Textfield"
        description="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus excepturi placeat, facilis ut ad voluptatem suscipit quisquam dolorem pariatur alias dolore iusto illo perspiciatis, impedit tempore dicta aliquid quod quam?"
        codeExample={
          `
          <TextField 
          defaultValue="Example Value" 
            label="Example Label"
          />
          `
        }
        componentExample={
          <div style={{
            width:300
          }}>
            <TextField 
              defaultValue="Example Value" 
              label="Example Label"
            />
          </div>
        }
      />
      <Section
        id="searchbar-section"
        subtitle="Searchbar"
        description="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus excepturi placeat, facilis ut ad voluptatem suscipit quisquam dolorem pariatur alias dolore iusto illo perspiciatis, impedit tempore dicta aliquid quod quam?"
        codeExample={
          `
          <SearchBar onChange={(event)=>{}} onClick={(event)=>{}} />
          `
        }
        componentExample={<div style={{width:"400px"}}>
        <SearchBar onChange={(event)=>{}} onClick={(event)=>{}} />
        </div>}
      />
      <Section
        id="verticalform-section"
        subtitle="Formulario vertical"
        description="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus excepturi placeat, facilis ut ad voluptatem suscipit quisquam dolorem pariatur alias dolore iusto illo perspiciatis, impedit tempore dicta aliquid quod quam?"
        codeExample={
          `
              
          const [items, setItems] = useState<VerticalFormData[]>([
                {
                    type: 'Macro',
                    value1 : 'este',
                    value2 : 'este',
                    value3 : 'hola',
                    value4 : 'hola',
                    value5 : 'hola',
                    value6 : 'hola',
                    value7 : 'hola',
                    value8 : 'hola',
                },
                {
                    type: 'Macro',
                    value1 : 'este',
                    value2 : 'este',
                },
            ])


            <div style={{
                display:'flex',
                flexDirection:'row',
                flexWrap:'wrap',
                width:'100%'
            }}>
              {
                items.map((element, index, array) => {
                  return  <VerticalForm onChange={setItems} key={index} sectionData={element} itemIndex={index} items={array}/>
              })
              }
            </div>
          `
        }
        componentExample={
          <div style={{
              display:'flex',
              flexDirection:'row',
              flexWrap:'wrap',
              width:'100%'
          }}>
            {
                items.map((element, index) => {
                    return  <VerticalForm 
                    onChange={(form:VerticalFormData[])=> setItems(()=>form.map(f=>({...f})))}
                    key={index} sectionData={element} itemIndex={index} items={items}/>
                })
            }
          </div>
        }
      />
      <Section
        id="modalform-section"
        subtitle="Modal form"
        description="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus excepturi placeat, facilis ut ad voluptatem suscipit quisquam dolorem pariatur alias dolore iusto illo perspiciatis, impedit tempore dicta aliquid quod quam?"
        codeExample={
          `

          const [show, setShow] = useState(false);
          const handleShow = () => setShow(true);
            const handleClose = () => setShow(false);

            const errors = [
              {
                "identity_document": [
                  "El documento de identidad es requerido."
                ],
                "name": [
                  "El nombre del paciente es requerido."
                ],
                "last_name": [
                  "El apellido del paciente es requerido."
                ],
                "birthdate": [
                  "La fecha de nacimiento es requerida."
                ],
                "gender": [
                  "El género del paciente es requerido."
                ],
                "country": [
                  "El país de origén es requerido."
                ],
                "image": [
                  "La imagen del paciente es requerida."
                ]
              }
            ]

          <button onClick={handleShow}>Open</button>
          <BaseModal show={show} title="Agregar un nuevo paciente" backbutton={<Button variant={"secondary"} onClick={handleClose} label={"VOLVER"}></Button>}>
          <ModalForm 
            errors={errors}
            onAccept={handleClose}
            title="DATOS DEL PACIENTE"
            formData={[
              {
                header: "Información personal",
                "Nº de  documento": {type:"text",value:"" , id:"identity_document"},
                "Nombre":{type:"text",value:"" , id:"name"},
                "Apellidos":{type:"text",value:"" , id:"last_name"},
                "Email": {type:"email",value:"", id:"email" },
                "Telefono": {type:"number",value:"", id:"phone_number" },
                "Fecha de Nacimiento": {type:"date", value:"", id:"birthdate"},
                "Estado Civil":{type:"select",value:"" , id:"civil_status", options:["Soltero(a)", "Comprometido(a)","Casado(a)", "Divorciado(a)", "Viudo(a)"]},
                "Género":{type:"radio",value:"" , options:["Masculino", "Femenino"], id:"gender"},
              },
              {
                header: "Contacto",
                "Dirección": {type:"text",value:"" , id:"address"},
                "Ciudad":{type:"text",value:"" , id:"city"},
                "Código postal": {type:"text",value:"" , id:"zip_code"},
                "País":{type:"select",value:"" , id:"country", options:["España", "Italia", "EEUU"]},
                "Nacionalidad":{type:"select",value:"" , id:"country", options:["España", "Italia", "EEUU"]}
            },
          {
            header: "Información Adicional",
            "Estudios": {type:"text",value:"" , id:"studies"},
            "Ocupación":{type:"text",value:"" , id:"occupation"},
            "Aficiones": {type:"text",value:"" , id:"hobbies"},
        }
          ]}/>
          {/* <DeleteAlert onClose={handleClose} onConfirm={()=>{}}></DeleteAlert> */}
          {/* <ModalIntakes/> */}
          </BaseModal>        
          `
        }
        componentExample={
          <>
          <button onClick={handleShow}>Open</button>
          <BaseModal show={show} title="Agregar un nuevo paciente" backbutton={<Button variant={"secondary"} onClick={handleClose} label={"VOLVER"}></Button>}>
          <ModalForm 
            errors={errors}
            onAccept={handleClose}
            title="DATOS DEL PACIENTE"
            formData={[
              {
                header: "Información personal",
                "Nº de  documento": {type:"text",value:"" , id:"identity_document"},
                "Nombre":{type:"text",value:"" , id:"name"},
                "Apellidos":{type:"text",value:"" , id:"last_name"},
                "Email": {type:"email",value:"", id:"email" },
                "Telefono": {type:"number",value:"", id:"phone_number" },
                "Fecha de Nacimiento": {type:"date", value:"", id:"birthdate"},
                "Estado Civil":{type:"select",value:"" , id:"civil_status", options:["Soltero(a)", "Comprometido(a)","Casado(a)", "Divorciado(a)", "Viudo(a)"]},
                "Género":{type:"radio",value:"" , options:["Masculino", "Femenino"], id:"gender"},
              },
              {
                header: "Contacto",
                "Dirección": {type:"text",value:"" , id:"address"},
                "Ciudad":{type:"text",value:"" , id:"city"},
                "Código postal": {type:"text",value:"" , id:"zip_code"},
                "País":{type:"select",value:"" , id:"country", options:["España", "Italia", "EEUU"]},
                "Nacionalidad":{type:"select",value:"" , id:"country", options:["España", "Italia", "EEUU"]}
              },
              {
                header: "Información Adicional",
                "Estudios": {type:"text",value:"" , id:"studies"},
                "Ocupación":{type:"text",value:"" , id:"occupation"},
                "Aficiones": {type:"text",value:"" , id:"hobbies"},
              }
          ]}/>
          {/* <DeleteAlert onClose={handleClose} onConfirm={()=>{}}></DeleteAlert> */}
          {/* <ModalIntakes/> */}
          </BaseModal>        
          </>
        }
      />
      
      <Section
        id="ingestamodal-section"
        subtitle="Modal ingesta recomendada"
        description="Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia, consectetur quod voluptatem praesentium at accusamus neque maiores aliquid possimus eaque atque dignissimos, omnis tempora vero voluptatum, delectus animi rem suscipit."
        codeExample={`
            <BaseModal show={showIntakes}>
            <ModalIntakes />
          </BaseModal>
        `}
        componentExample={
          <div style={{
            marginLeft:0,
            paddingTop:10
          }}> 
            <button onClick={handleShowIntakes}> Abrir modal </button>
            <BaseModal show={showIntakes} >
              <ModalIntakes 
              onAccept={handleCloseIntakes}/>
            </BaseModal>
          </div>
        }
      />
      <Section
        id="login-section"
        subtitle="Login"
        description="Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia, consectetur quod voluptatem praesentium at accusamus neque maiores aliquid possimus eaque atque dignissimos, omnis tempora vero voluptatum, delectus animi rem suscipit."
        codeExample={`
        <Login/>
        `}
        componentExample={
         <div style={{padding:0, margin:-300}}>
           <Login/>
         </div>
        }
      />
      <Section id="tablas" title="Tablas"/>
      <Section
        id="tablegeneral-section"
        subtitle="Tabla general"
        description="Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia, consectetur quod voluptatem praesentium at accusamus neque maiores aliquid possimus eaque atque dignissimos, omnis tempora vero voluptatum, delectus animi rem suscipit."
        codeExample={`
        * Edit va afuera de el componente que esten trabajando *

        export const Edit = () => {
          return (
            <Button variant={"edit"} />
          );
        }

        <TableListItem index={1} data={["La cucaracha?", "La cucaracha?", "La cucaracha?", "La cucaracha?", "La cucaracha?"]} buttons={[<Edit />]} />
        <TableListItem index={2} data={["La cucaracha?", "La cucaracha?", "La cucaracha?", "La cucaracha?", "La cucaracha?"]} buttons={[<Edit />, <Edit />]} />
        <TableListItem index={3} data={["La cucaracha?", "La cucaracha?", "La cucaracha?", "La cucaracha?", "La cucaracha?"]} buttons={[<Edit />, <Edit />]} />
        <TableListItem index={4} data={["La cucaracha?", "La cucaracha?", "La cucaracha?", "La cucaracha?", "La cucaracha?"]} buttons={[<Edit />, <Edit />]} />
        <TableListItem index={5} data={["La cucaracha?", "La cucaracha?", "La cucaracha?", "La cucaracha?", "La cucaracha?"]} buttons={[<Edit />, <Edit />]} />
        `}
        componentExample={
        <Table type="list" buttons header={["Juan", "Juan", "Juan", "Juan", "Juan"]} >
          <TableListItem index={1} data={["La cucaracha?", "La cucaracha?", "La cucaracha?", "La cucaracha?", "La cucaracha?"]} buttons={[<Edit />]} />
          <TableListItem index={2} data={["La cucaracha?", "La cucaracha?", "La cucaracha?", "La cucaracha?", "La cucaracha?"]} buttons={[<Edit />, <Edit />]} />
          <TableListItem index={3} data={["La cucaracha?", "La cucaracha?", "La cucaracha?", "La cucaracha?", "La cucaracha?"]} buttons={[<Edit />, <Edit />]} />
          <TableListItem index={4} data={["La cucaracha?", "La cucaracha?", "La cucaracha?", "La cucaracha?", "La cucaracha?"]} buttons={[<Edit />, <Edit />]} />
          <TableListItem index={5} data={["La cucaracha?", "La cucaracha?", "La cucaracha?", "La cucaracha?", "La cucaracha?"]} buttons={[<Edit />, <Edit />]} />
        </Table>
        }
      />
      <Section
        id="tableform-section"
        subtitle="Tabla formulario"
        description="Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia, consectetur quod voluptatem praesentium at accusamus neque maiores aliquid possimus eaque atque dignissimos, omnis tempora vero voluptatum, delectus animi rem suscipit."
        codeExample={`
          const Delete = () => {
            return (
              <Button variant={"delete"} />
            );
          }
      
          const Select = () => {
            return (
              <select id="Pais:" name="pais" style={{ width: 406, marginBottom: 20 }} >
                <option value="default">Seleccione pais</option>
                <option value="España">España</option>
                <option value="EEUU">EEUU</option>
                <option value="Europa">Europa</option>
                <option value="Italia">Italia</option>
              </select>
            )
          }
      
      
          const Text = () => {
            return (
              <TextField />
            );
          }
      
          const Check: FC<{ index: number }> = ({ index }) => {
            return (
              <input type='checkbox' name={"habitual"} onChange={() => { const checked = medidasCaseras[index].habitual === "false" ? "true" : "false"; setMedidasCaseras([...medidasCaseras, { ...medidasCaseras[index], habitual: checked }]) }}></input>
            );
          }
      
      
          const Plus = () => {
            return (
              <Button variant={"add"} onClick={() => (setMedidasCaseras([...medidasCaseras, { options: ["1", "2", "3", "4"], racion: "", habitual: "false" }]))} />
            );
          }
          <Table type="form" header={["NOMBRE", "RACION", "HABITUAL", <Plus />]}>
          {medidasCaseras.map((Element, index, Arr) => (
          <TableFormItem key={index * 0.01} formDataIndex={index} formData={Arr} inputs={[<Select />, <Text />, <Check index={index} />]} options={"namebro"} handleOnChange={setMedidasCaseras} buttons={[<Delete />]} />
          ))}
          </Table>
        `}
        componentExample={
          <Table type="form" header={["NOMBRE", "RACION", "HABITUAL", <Plus />]}>
            {medidasCaseras.map((Element, index, Arr) => (
              <TableFormItem key={index * 0.01} formDataIndex={index} formData={Arr} inputs={[<Select />, <Text />, <Check index={index} />]} options={"namebro"} handleOnChange={setMedidasCaseras} buttons={[<Delete />]} />
            ))}
          </Table>
        }
      />
      <Section id="botones" title="Botones"/>
      <Section id="generalbuttons-section" subtitle="Botones generales"
      description="Los botones incluyen su variante incluida donde puedes seleccionar cada una o puedes no añadir una variante y agregar texto este componente esta muy personalizado"
      />
      <Section 
      description={`sus variantes son: "delete" | "edit" | "add" | "info" | "view" |"config" | "search" | "file" | "secondary" | "secondary-mini" | "primary-mini" `}
      />
      <Section
        codeExample={
          `
            <Button variant="edit" label="This button has no label and is disabled"/>
            <Button variant="add" label="This button has no label and is disabled"/>
            <Button label="Aceptar"/>
            <Button variant="primary-mini" label="OK"/>
            <Button variant="secondary-mini" label="OK"/>
            <Button variant="secondary" label="Aceptar"/>
          `
        }
        componentExample={
          <div style={{
            display:'flex',
            flexDirection:'row',
            gridGap:5
          }}>
            <Button variant="edit" label="This button has no label and is disabled"/>
            <Button variant="add" label="This button has no label and is disabled"/>
            <Button label="Aceptar"/>
            <Button variant="primary-mini" label="OK"/>
            <Button variant="secondary-mini" label="OK"/>
            <Button variant="secondary" label="Aceptar"/>
            
          </div>
        }
      />
      <Section 
        id="switch-section"
        subtitle="Switch"
        description="Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia, consectetur quod voluptatem praesentium at accusamus neque maiores aliquid possimus eaque atque dignissimos, omnis tempora vero voluptatum, delectus animi rem suscipit."
        codeExample={`
        const [handleSwitch, setHandleSwitch] = useState(false)
        <Switch isOn={handleSwitch} handleToggle={()=>setHandleSwitch(e => !e)}/>
        `}
        componentExample={<Switch isOn={handleSwitch} handleToggle={()=>setHandleSwitch(e => !e)}/>}
      />
      <Section 
        id="checkbox-section"
        subtitle="CheckBox"
        description="Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia, consectetur quod voluptatem praesentium at accusamus neque maiores aliquid possimus eaque atque dignissimos, omnis tempora vero voluptatum, delectus animi rem suscipit."
        codeExample={`
          const [checked, setChecked] = useState(false)
          <CheckBox index={0} checked={checked} handleCheck={()=>setChecked(e => !e)}/>
        `}
        componentExample={<CheckBox index={0} checked={checked} handleCheck={()=>setChecked(e => !e)}/>}
      />
      <Section 
        id="layout"
       title="Layout"
      />
      <Section 
        id="navbar-section"
        subtitle="Navbar"
        description="Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia, consectetur quod voluptatem praesentium at accusamus neque maiores aliquid possimus eaque atque dignissimos, omnis tempora vero voluptatum, delectus animi rem suscipit."
        codeExample={`
          <Navbar/>
          `
        }
        //componentExample={<Navbar/>}
      />
      <Section 
        id="sidebar-section"
        subtitle="Sidebar"
        description="Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia, consectetur quod voluptatem praesentium at accusamus neque maiores aliquid possimus eaque atque dignissimos, omnis tempora vero voluptatum, delectus animi rem suscipit."
        codeExample={`
            <Sidebar/>
          `
        }
        //componentExample={<Sidebar/>}
      />
      <Section 
        id="base-section"
        subtitle="Base"
        description="Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia, consectetur quod voluptatem praesentium at accusamus neque maiores aliquid possimus eaque atque dignissimos, omnis tempora vero voluptatum, delectus animi rem suscipit."
        codeExample={`
            <Base 
            children={<div>Tu contenido principal</div>}
            />
          `
        }
        //componentExample={<Base children={<div></div>}/>}
      />
      <Section 
        id="header-section"
        subtitle="Header"
        description="Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia, consectetur quod voluptatem praesentium at accusamus neque maiores aliquid possimus eaque atque dignissimos, omnis tempora vero voluptatum, delectus animi rem suscipit."
        codeExample={`
        <Header
            title="titles 2 goes here"
            search={false}
            buttons={
              [
                <Button disabled={true} variant="add" />,
                <Button disabled={true} variant="view" />,
                <Button disabled={true} variant="edit" />,
                <Button variant="delete" />

              ]
            }
          />
          `
        }
        componentExample={<Header
                      title="titles 2 goes here"
                      /* SEARCH BAR WON'T SHOW*/
                      search={false}
                      buttons={
                        [
                          <Button disabled={true} variant="add" />,
                          <Button disabled={true} variant="view" />,
                          <Button disabled={true} variant="edit" />,
                          <Button variant="delete" />
          
                        ]
                      }
                    />}
      />
      <Section 
        id="tabs-section"
        subtitle="Tabs"
        description="Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia, consectetur quod voluptatem praesentium at accusamus neque maiores aliquid possimus eaque atque dignissimos, omnis tempora vero voluptatum, delectus animi rem suscipit."
        codeExample={`
          <Tabs 
              headerTabs={
              [
                {
                  title:'Tab 1',
                  body:{
                    type:'tab',
                    view:[
                      <div>
                        <h1>Contenido de tab 1</h1>
                      </div>
                    ]
                  }
                },
                {
                  title:'Tab 1',
                  body:{
                    type:'tab',
                    view:[
                      <div>
                        <h1>Contendido de tab 2</h1>
                      </div>
                    ]
                  }
                }
              ]
            }/>
          `
        }
        componentExample={<Tabs 
          headerTabs={
          [
            {
              title:'Tab 1',
              body:{
                type:'tab',
                view:[
                  <div>
                    <h1>Contenido de tab 1</h1>
                  </div>
                ]
              }
            },
            {
              title:'Tab 1',
              body:{
                type:'tab',
                view:[
                  <div>
                    <h1>Contendido de tab 2</h1>
                  </div>
                ]
              }
            }
          ]
      }/>}
      />
    </div>
  </div>
} 
  
  

export default UI_Example;