/**
 * Le otto pastiglie di colore fra cui una categoria sceglie la sua tinta.
 *
 * Una pastiglia per tono, nel tema in uso: chi sceglie vede il colore che poi
 * trovera' in elenco, non un campione astratto. Quella scelta ha un anello
 * del suo stesso colore forte; le altre sono solo il tenue.
 *
 * Ogni pastiglia si annuncia col nome del tono (`tinte.<indice>`): il colore
 * non si descrive da se', e chi la griglia non la vede ha solo quello.
 */
import { useMemo } from 'react';
import { Pressable, StyleSheet, View } from 'react-native';

import { useApp } from '../contesto.ts';
import { SPAZIO, useColori, useTinte } from '../tema.ts';
import type { Chiave } from '../../i18n/index.ts';

export type PropsSceltaTinta = {
  scelta: number;
  onScegli: (indice: number) => void;
};

export function SceltaTinta({ scelta, onScegli }: PropsSceltaTinta) {
  const { testo } = useApp();
  const colori = useColori();
  const tinte = useTinte();
  const stili = useMemo(() => creaStili(), []);

  return (
    <View style={stili.riga}>
      {tinte.map((tinta, indice) => {
        const attiva = indice === scelta;
        return (
          <Pressable
            key={indice}
            onPress={() => onScegli(indice)}
            style={[
              stili.pastiglia,
              { backgroundColor: tinta.tenue, borderColor: attiva ? tinta.forte : colori.bordo },
              attiva ? stili.pastigliaScelta : null,
            ]}
            accessibilityRole="button"
            accessibilityState={{ selected: attiva }}
            accessibilityLabel={testo(`tinte.${indice}` as Chiave)}
          >
            {attiva ? <View style={[stili.punto, { backgroundColor: tinta.forte }]} /> : null}
          </Pressable>
        );
      })}
    </View>
  );
}

const creaStili = () =>
  StyleSheet.create({
    riga: { flexDirection: 'row', flexWrap: 'wrap', gap: SPAZIO.s },
    // 36 e non 44 come le icone: otto pastiglie da 44 con lo spazio fra loro
    // fanno 408 punti, e su un iPhone da 402 l'ottava andava a capo da sola.
    // Con 36 stanno in una riga fino ai 375 di larghezza.
    pastiglia: {
      width: 36,
      height: 36,
      borderRadius: 18,
      borderWidth: StyleSheet.hairlineWidth,
      alignItems: 'center',
      justifyContent: 'center',
    },
    pastigliaScelta: { borderWidth: 3 },
    punto: { width: 12, height: 12, borderRadius: 6 },
  });