/**
 * La scelta di Tema o di Lingua: una sola schermata parametrica, perché sono
 * la stessa cosa — un elenco di scelte con la spunta su quella attiva, un
 * tocco applica subito e si resta sulla pagina, come fa iOS nelle sue stesse
 * Impostazioni — con dentro un elenco diverso e un'etichetta diversa.
 *
 * Ci si arriva dalla riga «Tema» o «Lingua» di Impostazioni. Le scelte
 * possibili, quale valore salvano e come si chiamano sono quelli di sempre
 * (TEMI/SCELTE_LINGUA, impostaTema/impostaLingua in ContestoApp): questa
 * schermata li sposta da Impostazioni.tsx, non li duplica.
 */
import { useMemo } from 'react';
import { Alert, ScrollView, StyleSheet, View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

import Barra from '../componenti/Barra.tsx';
import { Riquadro, RigaRiquadro } from '../componenti/Riquadro.tsx';
import { useApp } from '../contesto.ts';
import {
  chiaveTitoloScelta,
  chiaveValoreLingua,
  chiaveValoreTema,
  SCELTE_LINGUA,
  TEMI,
} from '../logica-impostazioni.ts';
import type { PropsSchermata } from '../navigazione.ts';
import type { Colori } from '../tema.ts';
import { SPAZIO, useColori } from '../tema.ts';

export default function Scelta({ navigation, route }: PropsSchermata<'Scelta'>) {
  const { testo, tema, sceltaLingua, impostaTema, impostaLingua } = useApp();
  const colori = useColori();
  const stili = useMemo(() => creaStili(colori), [colori]);
  // Schermata di stack senza menù sotto: il margine è l'inset del telefono,
  // come in Modifica. margineSottoScorrevole vale per le sezioni del menù.
  const sotto = useSafeAreaInsets().bottom;
  const campo = route.params.campo;

  const preferenza = (scrittura: Promise<void>) =>
    scrittura.catch(() => Alert.alert(testo('app.nome'), testo('errore.scrittura')));

  const righe =
    campo === 'tema'
      ? TEMI.map((valore) => ({
          chiave: valore,
          attiva: tema === valore,
          etichetta: testo(chiaveValoreTema(valore)),
          scegli: () => void preferenza(impostaTema(valore)),
        }))
      : SCELTE_LINGUA.map((valore) => ({
          chiave: valore,
          attiva: sceltaLingua === valore,
          etichetta: testo(chiaveValoreLingua(valore)),
          scegli: () => void preferenza(impostaLingua(valore)),
        }));

  return (
    <View style={stili.pagina}>
      <Barra
        onIndietro={navigation.goBack}
        etichettaIndietro={testo('indietro')}
        titolo={testo(chiaveTitoloScelta(campo))}
      />
      <ScrollView contentContainerStyle={[stili.contenuto, { paddingBottom: SPAZIO.xxl + sotto }]}>
        <Riquadro>
          {righe.map((r, indice) => (
            <RigaRiquadro
              key={r.chiave}
              titolo={r.etichetta}
              fine="spunta"
              accessibilityState={{ selected: r.attiva }}
              onPress={r.scegli}
              ultima={indice === righe.length - 1}
            />
          ))}
        </Riquadro>
      </ScrollView>
    </View>
  );
}

const creaStili = (colori: Colori) =>
  StyleSheet.create({
    pagina: { flex: 1, backgroundColor: colori.fondo },
    contenuto: { padding: SPAZIO.l },
  });