/**
 * 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'),
  cartella: require('../../../assets/segni/cartella.png'),
  cerca: require('../../../assets/segni/cerca.png'),
  chiudi: require('../../../assets/segni/chiudi.png'),
  elenco: require('../../../assets/segni/elenco.png'),
  griglia: require('../../../assets/segni/griglia.png'),
  indietro: require('../../../assets/segni/indietro.png'),
  libro: require('../../../assets/segni/libro.png'),
  matita: require('../../../assets/segni/matita.png'),
  meno: require('../../../assets/segni/meno.png'),
  piu: require('../../../assets/segni/piu.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' },
});