/**
 * Il ricettario di Quanto Basta: le regioni italiane, e la ricerca.
 *
 * Ci si arriva dal «+» («Dalle ricette italiane») e dal ricettario vuoto.
 * Senza ricerca si vedono le regioni che hanno ricette, da nord a sud, con
 * quante ne hanno; scrivendo si vedono le ricette trovate, cercate nel titolo,
 * negli ingredienti e nel nome della regione (cercaCatalogo).
 *
 * Le ricette stanno nell'app, senza foto e senza internet: vedi
 * src/catalogo/catalogo.ts.
 *
 * I colori non si scrivono qui: vengono da tema.ts, come nelle altre schermate.
 */
import { useMemo, useState } from 'react';
import { ScrollView, StyleSheet, Text, View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

import { catalogo } from '../../catalogo/catalogo.ts';
import { portata, regione } from '../../catalogo/regioni.ts';
import Barra from '../componenti/Barra.tsx';
import { CampoTesto, TitoloBlocco } from '../componenti/Campo.tsx';
import { Riquadro, RigaRiquadro } from '../componenti/Riquadro.tsx';
import { useApp } from '../contesto.ts';
import { cercaCatalogo, regioniConRicette } from '../logica-catalogo.ts';
import { descriviConteggio } from '../logica-categorie.ts';
import type { PropsSchermata } from '../navigazione.ts';
import type { Colori } from '../tema.ts';
import { SPAZIO, TESTO, useColori } from '../tema.ts';

export default function RicetteItaliane({ navigation }: PropsSchermata<'RicetteItaliane'>) {
  const { lingua, testo } = useApp();
  const colori = useColori();
  const stili = useMemo(() => creaStili(colori), [colori]);
  const sotto = useSafeAreaInsets().bottom;
  const [ricerca, setRicerca] = useState('');

  const tutte = catalogo();
  const trovate = useMemo(() => cercaCatalogo(tutte, ricerca, lingua), [tutte, ricerca, lingua]);
  const regioni = regioniConRicette(tutte);
  const cercando = ricerca.trim() !== '';

  const conteggio = (n: number) => {
    const { chiave, valori } = descriviConteggio(n);
    return testo(chiave, valori);
  };

  return (
    <View style={stili.schermo}>
      <Barra onIndietro={navigation.goBack} etichettaIndietro={testo('indietro')} titolo={testo('catalogo.titolo')} />
      <ScrollView
        contentContainerStyle={{ paddingBottom: SPAZIO.xxl + sotto }}
        keyboardShouldPersistTaps="handled"
        keyboardDismissMode="on-drag"
        automaticallyAdjustKeyboardInsets
      >
        <View style={stili.testa}>
          <Text style={stili.spiega}>{testo('catalogo.spiega')}</Text>
          <CampoTesto
            placeholder={testo('catalogo.cerca')}
            accessibilityLabel={testo('catalogo.cerca')}
            value={ricerca}
            onChangeText={setRicerca}
            returnKeyType="search"
            clearButtonMode="while-editing"
            autoCorrect={false}
          />
        </View>

        {cercando ? (
          trovate.length === 0 ? (
            <Text style={stili.nessuna}>{testo('catalogo.nessuna')}</Text>
          ) : (
            <View style={stili.blocco}>
              <Riquadro>
                {trovate.map((r, i) => (
                  <RigaRiquadro
                    key={r.id}
                    titolo={r.titolo}
                    valore={`${regione(r.regione)?.nome[lingua] ?? ''} · ${portata(r.portata).nome[lingua]}`}
                    onPress={() => navigation.navigate('RicettaItaliana', { id: r.id })}
                    ultima={i === trovate.length - 1}
                  />
                ))}
              </Riquadro>
            </View>
          )
        ) : (
          <>
            <TitoloBlocco titolo={testo('catalogo.regioni')} />
            <View style={stili.blocco}>
              <Riquadro>
                {regioni.map((r, i) => (
                  <RigaRiquadro
                    key={r.id}
                    titolo={regione(r.id)?.nome[lingua] ?? r.id}
                    valore={conteggio(r.quante)}
                    onPress={() => navigation.navigate('RegioneItaliana', { regione: r.id })}
                    ultima={i === regioni.length - 1}
                  />
                ))}
              </Riquadro>
            </View>
          </>
        )}
      </ScrollView>
    </View>
  );
}

const creaStili = (colori: Colori) =>
  StyleSheet.create({
    schermo: { flex: 1, backgroundColor: colori.fondo },
    testa: { paddingHorizontal: SPAZIO.l, paddingTop: SPAZIO.s, gap: SPAZIO.m },
    spiega: { ...TESTO.etichetta, color: colori.testoTenue, lineHeight: 21 },
    blocco: { paddingHorizontal: SPAZIO.l, paddingTop: SPAZIO.l },
    nessuna: { ...TESTO.corpo, color: colori.testoTenue, textAlign: 'center', padding: SPAZIO.xxl },
  });