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 { Link } from 'react-router-dom';
import { NecessitatsCollection } from '../api/necessitats';


const QuadreInfo_Poble = ({esEditor, pobleSeleccionat, setPobleSeleccionat}) => {
          
     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"
                    key={`inNom_${pobleSeleccionat._id}`}
                    type="text"
                    defaultValue={ pobleSeleccionat ? pobleSeleccionat.nomPoble : ""}
                    // value={ 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" key={`inAmbit_${pobleSeleccionat._id}`} 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>;
};

const BotoPobleAmbIndicadors = ({pob, pobleSeleccionat, setPobleSeleccionat, esEditor}) => {
     // let pob = pobleSeleccionat;
     useSubscribe('necessitats', pob.ambitAssociat);
     const necessitats = useFind(NecessitatsCollection, [{"poble.ambitAssociat": pob.ambitAssociat}]);
     const [monitors, setMonitors] = useState(false);
     const [encarregats, setEncarregats] = useState(false);
     const [voluntaris, setVoluntaris] = useState(false);
     
     // let mon, mons, enc, encs, vol, vols;

     (async () => {
          const mons = await Roles.getUsersInRoleAsync("monitor_de_poble", pob?.ambitAssociat);
          // console.log("monitors: ", monitors);
          setMonitors(mons?.fetch().length || false);

          const encs = await Roles.getUsersInRoleAsync("encarregat_de_tasques", pob?.ambitAssociat);
          // console.log("monitors: ", monitors);
          setEncarregats(encs?.fetch().length || false);

          const vols = await Roles.getUsersInRoleAsync("voluntari_de_poble", pob?.ambitAssociat);
          // console.log("monitors: ", monitors);
          setVoluntaris(vols?.fetch().length || false);
     })();

     return <li
          key={`pob_${pob._id}`}
          style={{
               display: `block`,
               border: `1px solid #6666`,
               borderRadius: `.4em`,
               padding: `4px`,
               listStyle: `none`,
               backgroundColor: `${'lightgreen' || 'lightcoral'}`,
               position: 'relative',
               margin: '.2em'
          }}
     >
          {// Indicadors de Responsables
               <div style={{
                    position: `absolute`,
                    // display: `inline-block`,
                    display: `grid`,
                    gridTemplateAreas: `"mons encs vols"`,
                    justifyContent: `space-around`,
                    left: `0`,
                    top: `-.8em`,
                    width: `100%`,
                    fontSize: `60%`,
                    textAlign: `center`,
                    pointerEvents: `none`,
                    alignItems: `center`
               }}>
                    {
                         monitors
                         ? <span style={{
                              border: `1px solid #6666`,
                              borderRadius: `50%`,
                              minWidth: `1rem`,
                              minHeight: `1rem`,
                              backgroundColor: `#f006`,
                              gridArea: `mons`
                         }}>{monitors}</span>
                         : false
                    }
                    {    encarregats
                         ? <span style={{
                              border: `1px solid #6666`,
                              borderRadius: `50%`,
                              minWidth: `1rem`,
                              minHeight: `1rem`,
                              backgroundColor: `#fa0a`,
                              gridArea: `encs`
                         }}>{encarregats}</span>
                         : false
                    }
                    {    voluntaris
                         ? <span style={{
                              border: `1px solid #6666`,
                              borderRadius: `50%`,
                              minWidth: `1rem`,
                              minHeight: `1rem`,
                              backgroundColor: `#ff06`,
                              gridArea: `vols`
                         }}>{voluntaris}</span>
                         : false
                    }
               </div>
          }

          {// Indicadors de Necessitats
               <div style={{
                    position: `absolute`,
                    // display: `inline-block`,
                    display: `flex`,
                    // justifyContent: `space-around`,
                    left: `-1.5em`,
                    // top: `-.8em`,
                    width: `100%`,
                    fontSize: `60%`,
                    textAlign: `center`,
                    // lineHeight: `100%`
                    top: `.8em`,
                    pointerEvents: `none`
               }}>
                    {
                         necessitats.length
                         ?
                              <span style={{
                                   border: `1px solid #6666`,
                                   borderRadius: `50%`,
                                   minWidth: `1rem`,
                                   backgroundColor: `#00a6`
                              }}>{necessitats.length }</span>
                         : false
                    }
               </div>
          }

          {// Botó de creació de nou poble
               <Link to={`/poble/${pob.ambitAssociat}`}>
                    {pob.nomPoble} {esEditor && <button
                         onClick={(ev) => {
                              ev.preventDefault();
                              ev.stopPropagation();
                              
                              setPobleSeleccionat(pob);
                         }
                    }>Edita</button>}
               </Link>
          }
     </li>;
}

export const Pobles = () => {
     
     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();
     
     // console.log("isAdmin: ", isAdmin) ;
     
     // (async () => {
          useEffect(() => {
               (async () => {
                    const comprovaAdmin = await Roles.userIsInRoleAsync(userId, ["admin"]);
                    setEsEditor(comprovaAdmin);
               })();
          }, []);
     // })();

     
     
     
     

     // const Indicador = ({valor, ambit, }) => {

     // };
     
     return <>
          
          <h1>Pobles</h1>

          { esEditor && (pobleSeleccionat || creantPoble) && <QuadreInfo_Poble {... {pobleSeleccionat, setPobleSeleccionat, esEditor} } /> }
          
          <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 => {
                    return <BotoPobleAmbIndicadors {... {pobleSeleccionat, setPobleSeleccionat, pob, esEditor, key: `pob_${pob.ambitAssociat}`} } />
               })
          }</ul>

          {esEditor && <button
               onPointerUp={ev => {
                    setCreantPoble(!creantPoble);
               }}
          >+</button>}
     </>;
};