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";




export const Usuaris = () => {
     
     const [usrSeleccionat, setUsrSeleccionat] = useState(null);
     useSubscribe('pobles');
     const pobles = useTracker("pobles", () => PoblesCollection.find().fetchAsync());
     
     const [esEditor, setEsEditor] = useState(false);
     const userId = Meteor.userId();
     
     const usuaris = useTracker("usuaris", () => {
          Meteor.subscribe('usuaris');
          return Meteor.users.find().fetch().filter(u => u._id !== Meteor.userId());
     });
     // console.log("isAdmin: ", isAdmin) ;
     console.log("usuaris: ", usuaris);
     // (async () => {
          useEffect(() => {
               (async () => {
                    const comprovaAdmin = await Roles.userIsInRoleAsync(userId, ["admin"]);
                    setEsEditor(comprovaAdmin);
               })();
               
          }, []);
     // })();

     const QuadreInfo_Usuari = () => {
          
          return <div style={{
               display: `inline-block`,
               border: `1px solid #6666`,
               padding: `.5rem`,
               borderRadius: `.3em`,
               backgroundColor: `lightcyan`
          }}>
               
               {usrSeleccionat && <h2>{usrSeleccionat._id}</h2>}
               
               <form
                    action={d => {
                         try {
                              Meteor.callAsync('editaOAfigPoble',
                              {
                                   ...usrSeleccionat || [],
                                   nomPoble: d.get('nomPoble'),
                                   cp: d.get('cp') || "",
                                   comarca: d.get('comarca') || "",
                              }).then(() => setUsrSeleccionat(null))
                              .catch(err => console.error(err));
                         } catch (err) {
                              alert(err);
                              console.error(err);
                         }
                    }}
               >
                    <label htmlFor="inUsername">Nom d'usuari: </label><input name="inUsername" type="text" defaultValue={ usrSeleccionat ? usrSeleccionat.username : ""}/><br />
                    <label htmlFor="inTel">Telèfon: </label><input name="inTel" type="tel" /><br />
                    <label htmlFor="inEmail">Correu Electrònic: </label><input name="inEmail" type="email" /><br />
                    <input type='submit' value="Actualitzar la Població" />
                    <button onClick={ev => {
                    ev.preventDefault();
                    if (confirm(`Vas a eliminar el poble "${usrSeleccionat.nomPoble}". És una operació irreversible. Procedir?`)) {
                         Meteor.callAsync('eliminaPoble', usrSeleccionat._id).catch(err => console.error(err));
                              setUsrSeleccionat(null);
                         }
                    }}>Elimina</button>
               </form>
          </div>;
     };

     return <Suspense fallback={<>Carregant...</>} >
          <h1>Usuaris</h1>

          { esEditor && <QuadreInfo_Usuari /> }
          
          <ul style={{
               display: `flex`,
               flexWrap: `wrap`,
               justifyContent: `space-evenly`,
               rowGap: `.3em`,
               alignContent: `space-around`
          }}>{
          usuaris
               .sort((a,b) => a.username?.toLowerCase() > b.username?.toLowerCase())
               .map(usr => <li
                    key={`usr_${usr._id}`}
                    style={{
                         display: `block`,
                         border: `1px solid #6666`,
                         borderRadius: `.4em`,
                         padding: `4px`,
                         listStyle: `none`,
                         backgroundColor: `${'lightgreen' || 'lightcoral'}`
                    }}
               >
                         {usr.username}{esEditor && <button onClick={() => {setUsrSeleccionat(usr)}}>Edita</button>}</li>)
          }</ul>
     </Suspense>;
};