import React, { Suspense, useEffect, useState, useRef, lazy } from 'react';
import { Meteor } from 'meteor/meteor';
import { Random } from 'meteor/random';
import { NecessitatsCollection } from '/imports/api/necessitats.js';
import { PoblesCollection } from '../api/pobles';
import { CodisCollection } from '../api/codis';
// import { TipusCollection } from '../api/tipus';
import { useSubscribe, useTracker, useFind } from 'meteor/react-meteor-data/suspense';
import { Roles } from 'meteor/roles';
// import { useUserId } from 'meteor/react-meteor-accounts';
import Select from 'react-select';

import CreatableSelect from 'react-select/creatable';
// import AsyncCreatableSelect from 'react-select/async-creatable';
// import { BarraNav } from "./BarraNav/BarraNav";

// import InfiniteCalendar from 'react-infinite-calendar';
// import 'react-infinite-calendar/styles.css';

function generaCodi() {0
     return Random.id().slice(0, 5);
}

export const Codis = () => {
          
     // const [permes, setPermes] = useState(false);
     const [esEditor, setEsEditor] = useState(false);
     const userId = Meteor.userId();
     
     useEffect(() => {
          (async () => {
               const comprovaAdmin = await Roles.userIsInRoleAsync(userId, ["admin"]);
               setEsEditor(comprovaAdmin);
          })();
     }, []);

     // console.log("isAdmin: ", isAdmin) ;
     
     const [ambitSeleccionat, setAmbitSeleccionat] = useState(null);

     useSubscribe('necessitats');
     const necessitats = useTracker("necessitats", () => NecessitatsCollection.find().fetchAsync());

     useSubscribe('codis');
     const codis = useTracker("codis", () => CodisCollection.find().fetchAsync());

     useSubscribe('pobles');
     const pobles = useTracker("pobles", () => PoblesCollection.find().fetchAsync());
     const ambits = pobles?.map(p => p?.ambitAssociat);

     // console.log("ambits: ", ambits);

     // useSubscribe('tipus');
     // const ambits = useTracker("ambits", () => Collection.find().fetchAsync());

     // console.log("tipus: ", tipus);
     // console.log("necessitats: ", necessitats);
     
     // console.log("tipusSeleccionat: ", tipusSeleccionat);


     // const filterAmbit = (inputValue) => {
     //      return ambits.filter((i) =>
     //           i.toLowerCase().includes(inputValue.toLowerCase())
     //      );
     // };
     // const [ambitGeneral, setAmbitGeneral] = useState(ambitSeleccionat === "GENERAL");

     const SelectorDeRol = () => {

          return <>
               <label htmlFor="selRol">Rol: </label>
               <Select
                    required
                    key={Math.random()}
                    name="selRol"
                    // filterOption={(opts) => necessitats.find(nec => nec.tipus === tipusSeleccionat._id)}
                    
                    options={
                         (ambitSeleccionat?.value === "GENERAL")
                         ? [
                              {
                                   value: "admin",
                                   label: "administrador"
                              },
                              {
                                   value: "usuari",
                                   label: "usuari"
                              }
                         ]

                         : [
                              {
                                   value: "monitor_de_poble",
                                   label: "monitor_de_poble"
                              },
                              {
                                   value: "encarregat_de_tasques",
                                   label: "encarregat_de_tasques"
                              },
                              {
                                   value: "voluntari_de_poble",
                                   label: "voluntari_de_poble"
                              }
                         ]
                    }
               />
          </>;
     }

     const QuadreInfo_Codis = () => {

          const [actCond, setActCond] = useState(true);
          const [codiGenerat, setCodiGenerat] = useState(generaCodi()?.toUpperCase());
          
          
          return <div style={{
               display: `inline-block`,
               border: `1px solid #6666`,
               padding: `.5rem`,
               borderRadius: `.3em`,
               backgroundColor: `lightcyan`
          }}>
          
          {ambitSeleccionat && <h1>{ambitSeleccionat?.value}</h1>}
          <h1>Codis</h1>

          {/* <button
                    onClick={ev =>  {
                         ev.preventDefault();
                         ev.stopPropagation();

                         setCodiGenerat(generaCodi());
                    }}
               >Genera el codi</button> */}

               <div
                    style={{
                         fontWeight: `bolder`,
                         textAlign: `center`,
                         transform: `scale(2)`
                    }}
                    >
                    <span
                         style={{
                              backgroundColor: `white`,
                              border: `3px solid black`,
                              padding: `0 .2em`,
                              margin: `1rem auto`,
                         }}
                    >{codiGenerat}</span>
               </div>
               <br />

          <p>Tria el rol que adquirirà qui utilitze el codi anterior una vegada activat</p>


          <form
               action={d => {
                    // if (d.get('selTipus'))
                    try {
                         Meteor.callAsync('editaOAfigCodi', {
                              ...codiGenerat || [],
                              codi: codiGenerat,
                              ambit: d.get('selAmbit') || "",
                              rol: d.get('selRol'),
                              act_abs: d.get('activ_abs'),
                              act_cond: d.get('activ_cond'),
                              periode_validesa_ini: d.get('periode_validesa_ini'),
                              periode_validesa_fi: d.get('periode_validesa_fi')
                         })
                              .then(() => setAmbitSeleccionat(null))
                              .catch(err => console.error(err))
                         ;
                    } catch (err) {
                         alert(err);
                         console.error(err);
                    }
               }}
          >
               <label htmlFor="selAmbit">Àmbit: </label>
               {/* Si
                    l'usuari és ADMINISTRADOR o té permisos de responsabilitat, podrà crear nous Tipus al CREAR o a l'EDITAR
               si no
                    tansols podrà assignar a un tipus predefinit o al de ALTRES
               */}

               <Select
                    required
                    name="selAmbit"
                    // formatCreateLabel={(inputValue) => "Crear nou tipus..."}
                    // filterOption={filterAmbit}
                    defaultValue={ambitSeleccionat}
                    options={
                         [...
                              ambits
                              .map((v,i) => ({
                                   value: v,
                                   label: v
                              }))
                              .sort((a,b) => a.label.toLowerCase() > b.label.toLowerCase()),
                              {
                                   value: "GENERAL",
                                   label: "GENERAL"
                              }
                         ]
                    }
                    // onCreateOption={(inputValue) => Meteor.callAsync('afigT', {titol: inputValue})}
                    isSearchable
                    // loadOptions={tipus.map((v,i) => ({value: v, label: v.titol}))}
                    onChange={amb => {
                         setAmbitSeleccionat(amb);
                         console.log("amb: ", amb);

                    }}
               />
               
               {/* <select name="selTipus">
                    <option value="moble">Moble</option>
                    <option value="maquinari">Maquinari</option>
                    <option value="menjar">Menjar i beguda</option>
                    <option value="infantil">Infantils</option>
                    <option value="higiene">Higiene</option>
               </select> */}

               <br />

               <SelectorDeRol {... {ambitSeleccionat}} />

               <br /><br />

               <label htmlFor="periode_validesa">Periode de validesa: </label>
               
               <div style={{
                    border: `1px solid #cccc`,
                    borderRadius: `.4em`,
                    margin: `1rem`,
                    padding: `.6rem`,
                    backgroundColor: `lightslategray`
               }}>
                    <p>TEMPS REAL:</p>
                    <label htmlFor="activ_abs"
                         style={{
                              color: `red`
                         }}
                    >Activació absoluta: </label>
                    <input type="checkbox" name='activ_abs' />
                    
                    <br />

                    {/* L'activació condicionada desactivada fa que no siguen 'required' les dates d'inici i final */}

                    <label htmlFor="activa_cond">Activació condicionada: </label>
                    <input type="checkbox" name='activ_cond' checked={actCond} 
                         onChange={(ev) => setActCond(!actCond)}
                    />
                    <p
                         style={{
                              color: `red`
                         }}
                    >ATENCIÓ al format! <b>(mm/dd/aaaa)</b></p>

                    Des de: <input required={actCond} type="date" name="periode_validesa_ini" />
                    <br />
                    Fins a: <input required={actCond} type="date" name="periode_validesa_fi" />
                    <br />
               </div>
          
               {/* <select name="s.
               elPoble">
                    {
                         pobles.map((v,i) => <option key={`optPob${i}`}>{v.nomPoble}</option>)
                    }
               </select> */}
               

               
                              
               <input type='submit' value="Donar d'alta el codi" />

               {/* {ambitSeleccionat && esEditor && <button onClick={ev => {
                    ev.preventDefault();
                    if (confirm(`Vas a eliminar el poble "${pobleSeleccionat.nomPoble}". És una operació irreversible. Procedir?`)) {
                         Meteor.callAsync('eliminaPoble', pobleSeleccionat._id).catch(err => console.error(err));
                         setNecessitatSeleccionada(null);
                    }
               }}>Elimina</button>} */}
          </form>
          </div>;
     };

     const
          today = new Date(),
          lastWeek = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 7)
     ;

     console.log("codis: ", codis);

          
     return <Suspense fallback={<>Carregant...</>} >
          
          <QuadreInfo_Codis />

          <br /><br />

          {/* <AsyncCreatableSelect
               cacheOptions
               defaultOptions={tipus.map((v,i) => ({value: v, label: v.titol})) }
               loadOptions={tipus.map((v,i) => ({value: v, label: v.titol}))}
          /> */}
          
          {/* <SelectSearch options={options} value="sv" name="language" placeholder="Choose your language" /> */}

          
          <ul style={{
               display: `flex`,
               flexWrap: `wrap`,
               justifyContent: `space-evenly`,
               rowGap: `.3em`,
               alignContent: `space-around`
          }}>{
               codis
               // .reverse()
               // .sort((a,b) => a?.codi?.editedAt < b?.codi?.editedAt)
               .map(cod => <li
                    key={cod._id}
                    style={{
                         display: `block`,
                         border: `1px solid #6666`,
                         borderRadius: `.4em`,
                         padding: `4px`,
                         listStyle: `none`,
                         backgroundColor: `${'lightgreen' || 'lightcoral'}`,
                         position: `relative`
                    }}
               >
                    <span
                         style={{
                              width: `5px`,
                              border: `1px solid #fffa`,
                              position: `absolute`,
                              borderRadius: `50%`,
                              height: `5px`,
                              right: `2px`,
                              top: `2px`,
                              boxShadow: `0 0 14px 5px ${cod.act_abs === "on" ? "lime" : "red"}`,
                              backgroundColor: `${cod.act_abs === "on" ? "lime" : "red"}`
                         }}
                         onClick={ev => {
                              ev.preventDefault();
                              ev.stopPropagation();

                              Meteor.callAsync('modActivacioAbsolutaCodi', cod);
                         }}
                    ></span>
                         {cod.codi}
                         {/* {esEditor && <button onClick={() => {setAmbitSeleccionat({value: cod, label: cod})}}>Edita</button>} */}
               </li>)
          }</ul>

          {/* <InfiniteCalendar
               width={400}
               height={600}
               selected={today}
               disabledDays={[0,6]}
               minDate={lastWeek}
          /> */}
     </Suspense>;
};