/**
 * Le ricette di una regione del ricettario di Quanto Basta, divise per
 * portata nell'ordine di un pranzo (perPortata). Si tocca una ricetta per
 * vederla e aggiungerla al proprio ricettario.
 *
 * I colori non si scrivono qui: vengono da tema.ts, come nelle altre schermate.
 */
import { useMemo } from 'react';
import { ScrollView, StyleSheet, 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 { TitoloBlocco } from '../componenti/Campo.tsx';
import { Riquadro, RigaRiquadro } from '../componenti/Riquadro.tsx';
import { useApp } from '../contesto.ts';
import { perPortata } from '../logica-catalogo.ts';
import type { PropsSchermata } from '../navigazione.ts';
import type { Colori } from '../tema.ts';
import { SPAZIO, useColori } from '../tema.ts';

export default function RegioneItaliana({ navigation, route }: PropsSchermata<'RegioneItaliana'>) {
  const { lingua, testo } = useApp();
  const colori = useColori();
  const stili = useMemo(() => creaStili(colori), [colori]);
  const sotto = useSafeAreaInsets().bottom;
  const id = route.params.regione;
  const gruppi = useMemo(() => perPortata(catalogo(), id), [id]);

  return (
    <View style={stili.schermo}>
      <Barra onIndietro={navigation.goBack} etichettaIndietro={testo('indietro')} titolo={regione(id)?.nome[lingua] ?? ''} />
      <ScrollView contentContainerStyle={{ paddingBottom: SPAZIO.xxl + sotto }}>
        {gruppi.map((g) => (
          <View key={g.portata}>
            <TitoloBlocco titolo={portata(g.portata).nome[lingua]} />
            <View style={stili.blocco}>
              <Riquadro>
                {g.ricette.map((r, i) => (
                  <RigaRiquadro
                    key={r.id}
                    titolo={r.titolo}
                    onPress={() => navigation.navigate('RicettaItaliana', { id: r.id })}
                    ultima={i === g.ricette.length - 1}
                  />
                ))}
              </Riquadro>
            </View>
          </View>
        ))}
      </ScrollView>
    </View>
  );
}

const creaStili = (colori: Colori) =>
  StyleSheet.create({
    schermo: { flex: 1, backgroundColor: colori.fondo },
    blocco: { paddingHorizontal: SPAZIO.l },
  });