import React, { Suspense, useEffect, useState, useRef, lazy } from 'react';
import { Meteor } from 'meteor/meteor';
import { PoblesCollection } from '/imports/api/pobles.js';
import { useSubscribe, useTracker, useFind } from 'meteor/react-meteor-data/suspense';

import { Roles } from 'meteor/roles';
// import { useUserId } from 'meteor/react-meteor-accounts';
import { BarraNav } from "./BarraNav/BarraNav";
import { useParams } from "react-router-dom";




export const Poble = () => {
     
     let { ambitPoble } = useParams();

     // const [pobleSeleccionat, setPobleSeleccionat] = useState(null);
     // const [creantPoble, setCreantPoble] = useState(false);
     useSubscribe('pobles');
     useSubscribe('usuaris');
     // const pobles = useTracker("pobles", () => PoblesCollection.find().fetchAsync());
     const pobles = useFind(PoblesCollection, [{}, {sort: {nomPoble: 1}}]);
     
     const [esEditor, setEsEditor] = useState(false);
     const userId = Meteor.userId();
     let pob;

     console.log("ambitPoble: ", ambitPoble);
     console.log("pobles: ", pobles);
     pob = pobles.find(p => p.ambitAssociat === ambitPoble);
     console.log("pob: ", pob);

     // console.log("isAdmin: ", isAdmin) ;
     
     // (async () => {
          useEffect(() => {
               (async () => {
                    const comprovaAdmin = await Roles.userIsInRoleAsync(userId, ["admin"]);
                    setEsEditor(comprovaAdmin);

               })();
          }, []);
     // })();

     
     
     // const QuadreInfo_Poble = () => {
          
     //      const refInAmbitAssignat = useRef();

     //      return <div style={{
     //           display: `inline-block`,
     //           border: `1px solid #6666`,
     //           padding: `.5rem`,
     //           borderRadius: `.3em`,
     //           backgroundColor: `lightcyan`
     //      }}>
               
     //           {pobleSeleccionat && <h2>{pobleSeleccionat._id}</h2>}

     //           <form
     //                action={d => {
     //                     try {
     //                          Meteor.callAsync('editaOAfigPoble',
     //                          {
     //                               ...pobleSeleccionat || [],
     //                               nomPoble: d.get('nomPoble'),
     //                               cp: d.get('cp') || "",
     //                               comarca: d.get('comarca') || "",
     //                               ambitAssociat: d.get('ambit-associat')
     //                          }).then(() => setPobleSeleccionat(null))
     //                          .catch(err => console.error(err));
     //                     } catch (err) {
     //                          alert(err);
     //                          console.error(err);
     //                     }
     //                }}
     //           >
     //                <label htmlFor="nomPoble">Població: </label>
     //                <input
     //                     name="nomPoble"
     //                     type="text"
     //                     defaultValue={ pobleSeleccionat ? pobleSeleccionat.nomPoble : ""}
     //                     onChange={ev => refInAmbitAssignat.current.value = ev.target.value.replace(/ +/g, '-').toLowerCase()}
     //                /><br />
     //                <label htmlFor="comarca">Comarca: </label><input name="comarca" type="text" /><br />
     //                <label htmlFor="cp">Codi Postal: </label><input name="cp" type="text" /><br />
                    
     //                { esEditor && <>
     //                <br /><br />
     //                Àmbit associat:

     //                <input type="text" name="ambit-associat" id="ambit-associat" defaultValue={pobleSeleccionat?.ambitAssociat} ref={refInAmbitAssignat} />
     //                {/* // nomPoble.replace(/ +/g, '-').toLowerCase()}/> */}
     //                <br /><br />
     //                </>}

     //                <input type='submit' value="Actualitzar la Població" />
     //                <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));
     //                          setPobleSeleccionat(null);
     //                     }
     //                }}>Elimina</button>
     //           </form>
     //      </div>;
     // };
     
     return <Suspense fallback={<>Carregant...</>} >
          
          <h1>{pob?.nomPoble}</h1>

          <h2>Monitores:</h2>
          <ul>
               {
                    (async () => {
                         const monitors = await Roles.getUsersInRoleAsync("monitor_de_poble", pob?.ambitAssociat);
                         console.log("monitors: ", monitors);
                         return monitors?.map( (u) => <li style={{
                              display: `block`,
                              border: `1px solid #6666`,
                              borderRadius: `.4em`,
                              padding: `4px`,
                              listStyle: `none`,
                              backgroundColor: `${'lightcoral'}`
                         }}>{u.username}</li> );
                    })()
               }
          </ul>

          <h2>Encarregades de tasques:</h2>
          <ul>
               {
                    (async () => {
                         const encarregats = await Roles.getUsersInRoleAsync("encarregat_de_tasques", pob?.ambitAssociat);
                         console.log("encarregats: ", encarregats);
                         return encarregats?.map( (u) => <li style={{
                              display: `block`,
                              border: `1px solid #6666`,
                              borderRadius: `.4em`,
                              padding: `4px`,
                              listStyle: `none`,
                              backgroundColor: `${'orange'}`
                         }}>{u.username}</li> );
                    })()
               }
          </ul>

          <h2>Voluntàries de poble:</h2>
          <ul>
               {
                    (async () => {
                         const voluntaris = await Roles.getUsersInRoleAsync("voluntari_de_poble", pob?.ambitAssociat);
                         console.log("voluntaris: ", voluntaris);
                         return voluntaris?.map( (u) => <li style={{
                              display: `block`,
                              border: `1px solid #6666`,
                              borderRadius: `.4em`,
                              padding: `4px`,
                              listStyle: `none`,
                              backgroundColor: `${'lightgreen'}`
                         }}>{u.username}</li> );
                    })()
               }
          </ul>

          {/* { esEditor && (pobleSeleccionat || creantPoble) && <QuadreInfo_Poble /> }
          
          <ul style={{
               display: `flex`,
               flexWrap: `wrap`,
               justifyContent: `space-evenly`,
               rowGap: `.3em`,
               alignContent: `space-around`
          }}>{
          pobles
               .sort((a,b) => a.nomPoble?.toLowerCase() > b.nomPoble?.toLowerCase())
               .map(pob => <li
                    key={`pob_${pob._id}`}
                    style={{
                         display: `block`,
                         border: `1px solid #6666`,
                         borderRadius: `.4em`,
                         padding: `4px`,
                         listStyle: `none`,
                         backgroundColor: `${'lightgreen' || 'lightcoral'}`
                    }}
               >
                         {pob.nomPoble}{esEditor && <button onClick={() => {setPobleSeleccionat(pob)}}>Edita</button>}</li>)
          }</ul>
          {esEditor && <button
               onPointerUp={ev => {
                    setCreantPoble(!creantPoble);
               }}
          >+</button>} */}
     </Suspense>;
};