/**
 * La griglia delle trenta icone del catalogo.
 *
 * Le icone sono nostre e sono trenta: niente ricerca, niente caricamento,
 * niente rete. Si scorrono e si toccano.
 *
 * Il glifo lo disegna Icona.tsx (Task 18): la traduzione fra la chiave che sta
 * nel database e il nome che vuole MaterialCommunityIcons è scritta una volta
 * sola, lì, e qui non si ripete.
 *
 * Ogni cella si annuncia col nome tradotto dell'icona, `icone.<chiave>`: la
 * chiave del catalogo è italiana e non si traduce, e messa lì com'è farebbe
 * sentire trenta parole italiane a chi usa l'app in inglese. Il nome è l'unica
 * cosa che ha chi la griglia non la vede: il disegno non si descrive da sé.
 *
 * I colori non si scrivono qui: vengono da tema.ts, come in tutte le schermate.
 */
import { useMemo } from 'react';
import { Pressable, StyleSheet, View } from 'react-native';

import Icona from './Icona.tsx';
import { ICONE } from '../../domain/icone.ts';
import type { ChiaveIcona } from '../../domain/icone.ts';
import { useApp } from '../contesto.ts';
import type { Colori } from '../tema.ts';
import { RAGGIO, SPAZIO, useColori } from '../tema.ts';

export type PropsSceltaIcona = {
  scelta: ChiaveIcona;
  onScegli: (chiave: ChiaveIcona) => void;
};

export function SceltaIcona({ scelta, onScegli }: PropsSceltaIcona) {
  const { testo } = useApp();
  const colori = useColori();
  const stili = useMemo(() => creaStili(colori), [colori]);

  return (
    <View style={stili.griglia}>
      {ICONE.map((voce) => {
        const attiva = voce.chiave === scelta;
        return (
          <Pressable
            key={voce.chiave}
            onPress={() => onScegli(voce.chiave)}
            style={[stili.cella, attiva ? stili.cellaScelta : null]}
            accessibilityRole="button"
            accessibilityState={{ selected: attiva }}
            accessibilityLabel={testo(`icone.${voce.chiave}`)}
          >
            <Icona
              chiave={voce.chiave}
              dimensione={26}
              colore={attiva ? colori.accentoSopra : colori.testoTenue}
            />
          </Pressable>
        );
      })}
    </View>
  );
}

const creaStili = (colori: Colori) =>
  StyleSheet.create({
    griglia: { flexDirection: 'row', flexWrap: 'wrap', gap: SPAZIO.s },
    cella: {
      width: 44,
      height: 44,
      borderRadius: RAGGIO.campo,
      alignItems: 'center',
      justifyContent: 'center',
      backgroundColor: colori.superficie,
      borderWidth: StyleSheet.hairlineWidth,
      borderColor: colori.bordo,
    },
    cellaScelta: { backgroundColor: colori.accento, borderColor: colori.accento },
  });