import React, { Suspense, useEffect, useState } 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';

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

export const Codis = () => {
          
     const [esEditor, setEsEditor] = useState(false);
     const userId = Meteor.userId();

     const [codiSeleccionat, setCodiSeleccionat] = useState(null);
     
     useEffect(() => {
          (async () => {
               const comprovaAdmin = await Roles.userIsInRoleAsync(userId, ["admin"]);
               setEsEditor(comprovaAdmin);
          })();
     }, []);

     const [confecCodObj, setConfecCodObj] = useState({
          codi: generaCodi(),
          ambit: null,
          rol: null,
          absCond: "abs",
          absActiu: false,
          condIni: null,
          condFi: null
     });

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

     const codiDoc = useTracker("valsFormDoc", () => CodisCollection.findOneAsync(codiSeleccionat?._id));


     const SelectorDeRol = () => {

          return <>
               <label htmlFor="selRol">Rol: </label>
               <Select
                    required
                    key={Math.random()}
                    name="selRol"

                    defaultValue={
                         codiSeleccionat
                         ? {
                              label: codiSeleccionat?.rol,
                              value: codiSeleccionat?.rol
                         }

                         : confecCodObj?.rol || null

                    }

                    onChange={v => {
                         // console.log("v: ", v);

                         // console.log("cCO abans: ", confecCodObj);
                         setConfecCodObj({
                              ...confecCodObj,
                              rol: v
                         });

                         // console.log("cCO despres: ", confecCodObj);
                    }}
                    
                    options={
                         (confecCodObj?.ambit?.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());

          const [absCond, setAbsCond] = useState('cond');

          const codSelAbsActChecked = codiDoc ? {checked: codiDoc.absActiu} : {defaultChecked: confecCodObj.absActiu};

          // console.log("cS: ", codiSeleccionat);
          // console.log("cCO: ", confecCodObj);
          
          return <div style={{
               display: `inline-block`,
               border: `1px solid #6666`,
               padding: `.5rem`,
               borderRadius: `.3em`,
               backgroundColor: `lightcyan`,
               outline: `${codiSeleccionat?._id ? '5px solid black' : 'none'}`
          }}>
          
          <h1>Codis</h1>


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

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

          <form
               action={d => {
                    try {
                         Meteor.callAsync('editaOAfigCodi', {
                              ...codiGenerat || [],
                              codi: codiGenerat,
                              ambit: d.get('selAmbit') || "",
                              rol: d.get('selRol'),
                              
                              absCond,
                              absActiu: d.get('absActiu'),
                              condIni: d.get('condIni'),
                              condFi: d.get('condFi')
                              
                              
                    
                         })
                              .then(() => setAmbitSeleccionat(null))
                              .catch(err => console.error(err))
                         ;
                    } catch (err) {
                         alert(err);
                         console.error(err);
                    }
               }}
          >
               <label htmlFor="selAmbit">Àmbit: </label>

               <Select
                    required
                    name="selAmbit"
               
                    defaultValue={codiDoc && {
                         label: codiDoc?.ambit,
                         value: codiDoc?.ambit
                    } || confecCodObj.ambit}
                    options={
                         [...
                              ambits
                              .map((v,i) => ({
                                   value: v,
                                   label: v
                              }))
                              .sort((a,b) => a.label.toLowerCase() > b.label.toLowerCase()),
                              {
                                   value: "GENERAL",
                                   label: "GENERAL"
                              }
                         ]
                    }
                    isSearchable
                    onChange={amb => {

                         setConfecCodObj({
                              ...confecCodObj,
                              ambit: amb
                         });

                    }}
               />

               <br />

               <SelectorDeRol />
               

               <br /><br />

               <p>Periode de validesa: </p>
               
               <div style={{
                    border: `1px solid #cccc`,
                    borderRadius: `.4em`,
                    margin: `1rem`,
                    padding: `.6rem`,
                    backgroundColor: `lightslategray`
               }}>
                    {/* <p>TEMPS REAL:</p> */}
                    <label htmlFor="inActAbs">
                         <input
                              type="radio"
                              name='absCond'
                              value="abs"
                              id="inActAbs"

                              checked={
                                   codiSeleccionat
                                   &&
                                   codiSeleccionat.absCond === 'abs'
                                   
                                   ||
                                   
                                   confecCodObj?.absCond === 'abs'
                                   &&
                                   !codiSeleccionat
                              }

                              onChange={(ev) => {
                                   if (codiSeleccionat) {
                                        Meteor.callAsync('modActivacioAbsolutaCodi', codiSeleccionat);
                                        setCodiSeleccionat({
                                             ...codiSeleccionat,
                                             absCond: 'abs'
                                        });
                                   } else {
                                        setConfecCodObj({
                                             ...confecCodObj,
                                             absCond: 'abs'
                                        })
                                   }
                              }}
                         />
                         <span>Activació absoluta</span>
                    </label>
                    
                    <br />

                    <label htmlFor="inActCond">
                         <input
                              type="radio"
                              name='absCond'
                              value="cond"
                              id="inActCond"
                              
                              checked={
                                   codiSeleccionat
                                   &&
                                   codiSeleccionat.absCond === 'cond'
                                   
                                   ||
                                   
                                   confecCodObj?.absCond === 'cond'
                                   &&
                                   !codiSeleccionat
                              }

                              onChange={(ev) => {
                                   if (codiSeleccionat) {
                                        Meteor.callAsync('modActivacioAbsolutaCodi', codiSeleccionat);
                                        setCodiSeleccionat({
                                             ...codiSeleccionat,
                                             absCond: 'cond'
                                        });
                                   } else {
                                        setConfecCodObj({
                                             ...confecCodObj,
                                             absCond: 'cond'
                                        })
                                   }

                              }}
                         />
                         <span>Activació condicionada</span>
                    </label>

                    <br />
                    <br />

                    <div style={{
                         border: `1px solid #6666`,
                         padding: `0 1rem`,
                         borderRadius: `.5em`,
                         backgroundColor: `#fff2`
                    }}>
                    {
                         (codiSeleccionat
                         &&
                         codiSeleccionat?.absCond === 'abs'
                         
                         ||

                         confecCodObj?.absCond === 'abs'
                         )
                         &&
                         codiSeleccionat?.absCond !== 'cond'
                         &&

                         <>
                              <label htmlFor="act_status">Actiu</label>
                              <input
                                   type="checkbox"
                                   name="absActiu"
                                   id="absActiu"
                                   {...codSelAbsActChecked}
                                   onChange={ev => {
                                        ev.preventDefault();
                                        ev.stopPropagation();

                                        if (codiSeleccionat) {
                                             Meteor.callAsync('modActivacioAbsolutaCodi', codiSeleccionat);
                                             setCodiSeleccionat({
                                                  ...codiSeleccionat,
                                                  absActiu: !codiSeleccionat.absActiu
                                             });
                                        }

                                        setConfecCodObj({
                                             ...confecCodObj,
                                             absActiu: !confecCodObj.absActiu
                                        });
                                        
                                   }}
                              />
                         </>
                    }
                    {
                         (codiSeleccionat
                         &&
                         codiSeleccionat.absCond === 'cond'
                         
                         ||

                         confecCodObj?.absCond === 'cond'
                         )
                         &&
                         codiSeleccionat?.absCond !== 'abs'
                         &&
                         
                         <>
                              <p
                                   style={{
                                        color: `red`
                                   }}
                              >ATENCIÓ al format! <b>(mm/dd/aaaa)</b></p>

                              Des de: <input
                                   required={confecCodObj.actCond === 'cond'}
                                   type="date"
                                   name="condIni"
                                   onChange={v => {

                                        // console.log("dataIni: ", v.currentTarget.value);
                                        setConfecCodObj({
                                             ...confecCodObj,
                                             condIni: v.currentTarget.value
                                        })
                                   }}
                                   defaultValue={confecCodObj.condIni}
                              />
                              <br />
                              Fins a: <input
                                   required={confecCodObj.
                                   actCond === 'cond'}
                                   type="date"
                                   name="condFi"
                                   onChange={v => {
                                        // console.log("dataFi: ", v.currentTarget.value);
                                        setConfecCodObj({
                                             ...confecCodObj,
                                             condFi: v.currentTarget.value
                                        })
                                   }}
                                   defaultValue={confecCodObj.condFi}
                              />
                              <br />
                         </>
                    }
                    </div>
               </div>
               
               <input type='submit' value="Donar d'alta el codi" />

          </form>
          </div>;
     };

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

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

          <br /><br />

          <ul style={{
               display: `flex`,
               flexWrap: `wrap`,
               justifyContent: `space-evenly`,
               rowGap: `.3em`,
               alignContent: `space-around`
          }}>{
               codis

               .map(cod => <li
                    key={cod._id}
                    style={{
                         display: `block`,
                         border: `1px solid #6666`,
                         borderRadius: `.4em`,
                         padding: `4px`,
                         listStyle: `none`,
                         backgroundColor: `${'lightgreen' || 'lightcoral'}`,
                         position: `relative`,
                         outline: `${codiSeleccionat?._id === cod._id ? '3px solid black' : 'none'}`
                    }}
                    onClick={ev => {
                         ev.preventDefault();
                         ev.stopPropagation();

                         setCodiSeleccionat(codiSeleccionat?._id === cod._id ? null : cod);
                    }}
               >
                    <span
                         style={{
                              width: `5px`,
                              border: `1px solid #fffa`,
                              position: `absolute`,
                              borderRadius: `50%`,
                              height: `5px`,
                              right: `2px`,
                              top: `2px`,
                              boxShadow: `0 0 14px 5px ${cod.absActiu ? "lime" : "red"}`,
                              backgroundColor: `${cod.absActiu ? "lime" : "red"}`
                         }}
                         onClick={ev => {
                              ev.preventDefault();
                              ev.stopPropagation();

                              Meteor.callAsync('modActivacioAbsolutaCodi', cod);
                         }}
                    />
                         {cod.codi}

               </li>)
          }</ul>

     </Suspense>;
};