/**
 * La fascia che dice cosa si sta guardando quando la ricetta è riscalata:
 * "per 6 porzioni" oppure "su 250 g di farina", con accanto il ritorno alle
 * dosi originali.
 *
 * Con le dosi originali non si mostra affatto, e nemmeno quando la richiesta
 * non è più descrivibile: sparisce in silenzio, senza messaggi di errore. La
 * decisione la prende descriviRiscalo() in logica-dosatore.ts; qui si disegna
 * soltanto quello che lei ha già deciso.
 *
 * Qui si chiama `t()` con `voc.lingua` invece della `testo()` del contesto
 * perché il vocabolario è già una prop: il componente resta indipendente
 * dall'albero React e si può montare ovunque.
 */
import { useMemo } from 'react';
import { Pressable, StyleSheet, Text, View } from 'react-native';

import type { Ricetta, Richiesta } from '../../domain/types.ts';
import type { Vocabolario } from '../../domain/lingua/index.ts';
import { t } from '../../i18n/index.ts';
import { descriviRiscalo } from '../logica-dosatore.ts';
import type { Colori } from '../tema.ts';
import { RAGGIO, SPAZIO, TESTO, useColori } from '../tema.ts';

export interface PropsFasciaRiscalo {
  /** null = dosi originali. */
  richiesta: Richiesta | null;
  ricetta: Ricetta;
  voc: Vocabolario;
  onOriginali: () => void;
}

export default function FasciaRiscalo({
  richiesta,
  ricetta,
  voc,
  onOriginali,
}: PropsFasciaRiscalo) {
  const colori = useColori();
  const stili = useMemo(() => creaStili(colori), [colori]);

  const descrizione = richiesta === null ? null : descriviRiscalo(richiesta, ricetta, voc);
  if (descrizione === null) return null;

  return (
    <View style={stili.fascia}>
      <Text style={stili.testo} numberOfLines={2}>
        {t(descrizione.chiave, voc.lingua, descrizione.valori)}
      </Text>
      <Pressable onPress={onOriginali} hitSlop={8} accessibilityRole="button">
        <Text style={stili.originali}>{t('dosatore.originali', voc.lingua)}</Text>
      </Pressable>
    </View>
  );
}

const creaStili = (colori: Colori) =>
  StyleSheet.create({
    fascia: {
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'space-between',
      backgroundColor: colori.superficie,
      borderWidth: StyleSheet.hairlineWidth,
      borderColor: colori.bordo,
      borderRadius: RAGGIO.campo,
      paddingVertical: SPAZIO.m,
      paddingHorizontal: SPAZIO.l,
      marginHorizontal: SPAZIO.l,
      marginBottom: SPAZIO.m,
    },
    testo: { flex: 1, ...TESTO.etichetta, color: colori.testo },
    originali: { marginLeft: SPAZIO.m, ...TESTO.etichetta, fontWeight: '600', color: colori.accento },
  });