import React, { Suspense, useEffect, useState, useRef, lazy } from 'react';
import { Meteor } from 'meteor/meteor';;
import { NecessitatsCollection } from '/imports/api/necessitats.js';
import { PoblesCollection } from '../api/pobles';
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";




export const Tipus = () => {
          
     // 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 [tipusSeleccionat, setNecessitatSeleccionat] = useState(null);

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

     useSubscribe('pobles');
     const pobles = useTracker("pobles", () => PoblesCollection.find().fetchAsync());

     useSubscribe('tipus');
     const tipus = useTracker("tipus", () => TipusCollection.find().fetchAsync());

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


     const filterTipus = (inputValue) => {
          return tipus.filter((i) =>
          i.titol.toLowerCase().includes(inputValue.toLowerCase())
     );
     };

     const QuadreInfo_Tipus = () => {
          
          return <div style={{
               display: `inline-block`,
               border: `1px solid #6666`,
               padding: `.5rem`,
               borderRadius: `.3em`,
               backgroundColor: `lightcyan`
          }}>
          
          {tipusSeleccionat && <h1>{tipusSeleccionat._id}</h1>}
          <h1>Tipus</h1>

          

          <form
               action={d => {
                    if (d.get('selTipus'))
                    try {
                         Meteor.callAsync('editaOAfigNecessitat', {
                              ...tipusSeleccionat || [],
                              titol: d.get('titol'),
                              tipus: d.get('selTipus') || "",
                              poble: d.get('selPoble')
                         })
                              .then(() => setTipusSeleccionat(null))
                              .catch(err => console.error(err))
                         ;
                    } catch (err) {
                         alert(err);
                         console.error(err);
                    }
               }}
          >
               <label htmlFor="tipus">Tipus: </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
               */}

               <AsyncCreatableSelect
                    name="selTipus"
                    formatCreateLabel={(inputValue) => "Crear nou tipus..."}
                    defaultOptions={tipus.map((v,i) => ({value: v._id, label: v.titol})).sort((a,b) => a.label.toLowerCase() > b.label.toLowerCase()) } 
                    onCreateOption={(inputValue) => Meteor.callAsync('afigTipus', {titol: inputValue})}
                    isSearchable
                    // loadOptions={tipus.map((v,i) => ({value: v, label: v.titol}))}
               />
               
               {/* <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 />

               <label htmlFor="selNecessitat">Necessitat: </label>
               <Select
                    name="selNecessitat"
                    // filterOption={(opts) => necessitats.find(nec => nec.tipus === tipusSeleccionat._id)}
                    options={necessitats.map((v,i) => ({value: v._id, label: v.titol})).sort((a,b) => a.label.toLowerCase() > b.label.toLowerCase()) } 
               />

               <br />

               <label htmlFor="titol">Títol: </label>
               <input type="text" name='titol' />

               <br /><br />

               <label htmlFor="poble">Poble: </label>

               <CreatableSelect name="selPoble" options={pobles.map((v,i) => ({value: v._id, label: v.nomPoble})) } />
               {/* <select name="selPoble">
                    {
                         pobles.map((v,i) => <option key={`optPob${i}`}>{v.nomPoble}</option>)
                    }
               </select> */}
               
               <br />
                              
               <input type='submit' value="Enviar" />

               {tipusSeleccionat && 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>;
     };

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

          <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`
          }}>{
          tipus
               .sort((a,b) => a.titol?.toLowerCase() > b.titol?.toLowerCase())
               .map(titol => <li
                    key={`titol_${titol._id}`}
                    style={{
                         display: `block`,
                         border: `1px solid #6666`,
                         borderRadius: `.4em`,
                         padding: `4px`,
                         listStyle: `none`,
                         backgroundColor: `${'lightgreen' || 'lightcoral'}`
                    }}
               >
                         {titol.titol}{esEditor && <button onClick={() => {setTipusSeleccionat(titol)}}>Edita</button>}</li>)
          }</ul>
     </Suspense>;
};