/**
 * Un segno dell'interfaccia.
 *
 * Le immagini sono monocrome e il colore lo mette `tintColor`: seguono il tema
 * come farebbe un vettore, senza portarsi dietro una dipendenza nativa per
 * disegnarli. Il catalogo dei nomi sta in segni.ts, che i test caricano; qui
 * c'e' la mappa verso i file, che dev'essere fatta di `require` letterali —
 * Metro impacchetta le immagini leggendo il codice, e un percorso composto a
 * runtime non lo vedrebbe.
 */
import { Image, StyleSheet } from 'react-native';

import type { ChiaveSegno } from '../segni.ts';

const FILE: Record<ChiaveSegno, number> = {
  altro: require('../../../assets/segni/altro.png'),
  assistenza: require('../../../assets/segni/assistenza.png'),
  cerca: require('../../../assets/segni/cerca.png'),
  cestino: require('../../../assets/segni/cestino.png'),
  chiudi: require('../../../assets/segni/chiudi.png'),
  condividiandroid: require('../../../assets/segni/condividiandroid.png'),
  condividiios: require('../../../assets/segni/condividiios.png'),
  cuore: require('../../../assets/segni/cuore.png'),
  elenco: require('../../../assets/segni/elenco.png'),
  esporta: require('../../../assets/segni/esporta.png'),
  esterno: require('../../../assets/segni/esterno.png'),
  fotocamera: require('../../../assets/segni/fotocamera.png'),
  freccia: require('../../../assets/segni/freccia.png'),
  griglia: require('../../../assets/segni/griglia.png'),
  importa: require('../../../assets/segni/importa.png'),
  incolla: require('../../../assets/segni/incolla.png'),
  indietro: require('../../../assets/segni/indietro.png'),
  libro: require('../../../assets/segni/libro.png'),
  lingua: require('../../../assets/segni/lingua.png'),
  matita: require('../../../assets/segni/matita.png'),
  meno: require('../../../assets/segni/meno.png'),
  piu: require('../../../assets/segni/piu.png'),
  privacy: require('../../../assets/segni/privacy.png'),
  sezione: require('../../../assets/segni/sezione.png'),
  spunta: require('../../../assets/segni/spunta.png'),
  tema: require('../../../assets/segni/tema.png'),
  vassoio: require('../../../assets/segni/vassoio.png'),
};

export interface PropsSegno {
  nome: ChiaveSegno;
  dimensione: number;
  colore: string;
}

export default function Segno({ nome, dimensione, colore }: PropsSegno) {
  return (
    <Image
      source={FILE[nome]}
      style={[{ width: dimensione, height: dimensione }, { tintColor: colore }]}
      resizeMode="contain"
      // Un segno non e' un'illustrazione: chi ascolta la schermata sente
      // l'etichetta del pulsante che lo contiene, non lui.
      accessibilityElementsHidden
      importantForAccessibility="no"
      accessibilityIgnoresInvertColors
    />
  );
}

/** Per allineare un segno dove serve un ingombro fisso, senza scriverlo a mano. */
export const stiliSegno = StyleSheet.create({
  tastoTondo: { width: 44, height: 44, alignItems: 'center', justifyContent: 'center' },
});