import React, { Suspense } from 'react';
import { Meteor } from 'meteor/meteor';
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import { Login } from './Login';
import { useUserId } from 'meteor/react-meteor-accounts';
import { PoblesCollection } from '/imports/api/pobles.js';
import { useSubscribe, useTracker, useFind } from 'meteor/react-meteor-data/suspense';


const AfegirPoblacio = () => {
  useSubscribe('pobles');

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

  return <Suspense fallback={<>Carregant...</>} >
    <form action={d => {
        try {
          Meteor.callAsync('afigPoble',
            {
              createdAt: new Date(),
              nomPoble: d.get('nomPoble'),
              cp: d.get('cp') || "",
              comarca: d.get('comarca') || "",
            }
          ).catch(err => console.error(err));
        } catch (err) {
          alert(err);
          console.error(err);
        }
      
    }}>
      <label htmlFor="nomPoblacio">Població: </label><input name="nomPoble" type="text" /><br />
      <label htmlFor="comarca">Comarca: </label><input name="comarca" type="text" /><br />
      <label htmlFor="cp">Codi Postal: </label><input name="cp" type="text" /><br />
      <input type='submit' value="Crear la Població" />
    </form>

    <ul>{
      pobles
        .sort((a,b) => a.nomPoble.toLowerCase() > b.nomPoble.toLowerCase())
        .map(pob => <li key={`pob_${pob._id}`}>{pob.nomPoble}</li>)
    }</ul>
  </Suspense>;
};

const Loguejat = () => {
  const userId = useUserId();
  
  // const user = await Meteor.userAsync();

  return userId ? <div>
    
    <Link to="/afegir_poblacio" >Afegir Població</Link>
    
    <button onClick={() => Meteor.logout()} >Logout</button>

    <p>- poble (que cada poble només tinga accés a lo del seu poble, la resta de pobles no els han de poder tocar): Alaquàs / Albal / Aldaia / Alfafar / Algemesí / Alginet / Alcàsser / Benetússer / Beniparrell / Carlet / Catarroja / Dosaigües / Godelleta / Guadassuar / Iàtova / L'Alcúdia / Llocnou de la Corona / Massanassa / Paiporta / Parke Alkosa / Picanya / Sedaví / Setaigües / Utiel / València-Castellar Oliveral / València-Forn d'Alcedo / València-La Torre / Xest / Xiva / Llombai / Tremolar </p>
    <p>- estat: impossible de trobar / disponible / pendent / enviada / ha arribat (que cada poble puga tocar aquestes opcions dels subministres per al seu poble)</p>
    <p>- tipus de subministre: maquinària / menjar i beguda / productes infantils / higiene i neteja / sanitari / roba i calçat / ferramentes / necessitats especials / EPIs / electrònica / per a animals / roba de llit, mantes, cortines i mantells / vaixella i utensilis de cuina / papereria i material escolar / mobiliari i electrodomèstics /altres</p>
    <p>- necessitat (que la plataforma et dóne un desplegable amb totes les necessitats que s'han demanat fins ara en eixa categoria i pugues buscar, però també afegir-ne coses noves) - que la plataforma demane en aquest punt que siguen tant específiques com puguen (que no em fiquen com a necessitat "mobles" sinó per exemple "rentadora")</p>

    <p>- NOMÉS EN CAS DE MOBILIARI I ELECTRODOMÈSTICS:
      ---- adreça de la casa o lloc on s'ha de dur (tenda, casa, baix...)
      ---- que afegisquen dies i horaris en què estaran a eixa adreça
      ---- especificar que el contacte que afegisquen ha de ser necessàriament de la persona que ho va a rebre en la casa o espai
    </p>

    - que la plataforma recullga la data en la que es fa una petició de subministres

    - que la plataforma recullga la data en la que el subministre es canvia a l'estat "ha arribat)

    - Nom del contacte

    - Telèfon de contacte

    - Punt de descàrrega

    I després amb opció de visualitzar totes les necessitats que s'han incorporat prèviament al teu poble i assenyalar "ha arribat" en les que ja no necessites

    Nosaltres hauríem de tindre opció de filtrar les necessitats per pobles i condicions (per poder vore, per exemple, totes les necessitats pendents de tots els pobles, o només les necessitats pendents d'Alaquàs)
  </div>
  : <Link to="/login">Login</Link>
  ;
};

export const App = () => (
  <BrowserRouter>
    <Routes>
      <Route path="/" element={ <Loguejat /> } />
      <Route path="/afegir_poblacio" element={ <AfegirPoblacio /> } />
      <Route path="/login" element={ <Login /> } />
    </Routes>
  </BrowserRouter>
);