import React from "react";
import { useUserId } from 'meteor/react-meteor-accounts';
import { Link } from 'react-router-dom';
// import { styled } from 'styled-components'

// if (loguejat)


const BotóSecció = ({titol, linkto}) => {
     return <div style={{
          border: `1px solid #aaaa`,
          borderRadius: `.3rem`,
          padding: `.2rem`,
          backgroundColor: `lightblue`,
          margin: `.5rem`
     }}>
          <Link to={linkto} >{titol}</Link>
     </div>;
};

const SeccióPobles = () => <BotóSecció
     titol="Pobles"
     linkto="/pobles"
/>;

const SeccióNecessitats = () => <BotóSecció
     titol="Necessitats"
     linkto="/necessitats"
/>;

const PanellSeccions = ({children}) => {
     return <div style={{
          display: `flex`,
          border: `1px solid #cccc`,
          padding: `.5rem`,
          borderRadius: `.5rem`,
          backgroundColor: `lightslategray`
     }}>{children}</div>;
};

const Loguejat = () => {

     const userId = useUserId();

     return userId ? <div>
          <button onClick={() => Meteor.logout()} >Logout</button>
          
          <br /><br />
          
          <PanellSeccions >
               <SeccióPobles />
               <SeccióNecessitats />
          </PanellSeccions>
          

          <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">Entra o Registra't</Link>;
};

export default Loguejat;