/**
 * Una riga di ingrediente nella schermata Modifica: si legge come nel Dosatore
 * («320 g» in grassetto, poi il nome) e si tocca per aprire il foglio dove si
 * scrive (FoglioIngrediente).
 *
 * Prima la riga erano tre campi in fila, quantità, unità e nome, divisi solo
 * da una linea sottile: i tester non capivano che fossero tre campi, e
 * un'unità vuota lasciava un buco che sembrava un errore. Paolo ha scelto il
 * foglio il 28/09 (proposta C1 in docs/design/campionari/modifica.html).
 *
 * Le righe che il parser non ha capito stanno su un fondo ocra tenue, col
 * pallino e «Da controllare»: prima era una barretta a sinistra, che si
 * notava poco e non diceva cosa fare.
 *
 * Il testo dell'utente non viene mai interpretato: Text rende testo semplice,
 * non markup. Niente WebView, niente HTML.
 *
 * I colori non si scrivono qui: vengono da tema.ts, come nelle altre schermate.
 */
import { useMemo } from 'react';
import { Pressable, StyleSheet, Text, View } from 'react-native';

import { t } from '../../i18n/index.ts';
import type { Lingua } from '../../domain/lingua/index.ts';
import { testoQuantitaRiga } from '../logica-modifica.ts';
import type { Colori } from '../tema.ts';
import { SPAZIO, TESTO, useColori } from '../tema.ts';
import type { RigaBozza } from '../bozza.ts';
import Segno from './Segno.tsx';

export type PropsRigaIngrediente = {
  riga: RigaBozza;
  lingua: Lingua;
  onPress: () => void;
  /** La prima riga del riquadro non ha il separatore sopra. */
  prima: boolean;
};

export function RigaIngrediente({ riga, lingua, onPress, prima }: PropsRigaIngrediente) {
  const colori = useColori();
  const stili = useMemo(() => creaStili(colori), [colori]);
  const quantita = testoQuantitaRiga(riga, lingua);
  const incerta = riga.incerta;

  return (
    <Pressable
      onPress={onPress}
      accessibilityRole="button"
      accessibilityLabel={
        incerta
          ? `${riga.nome}, ${t('modifica.riga.incerta', lingua)}`
          : `${quantita.testo} ${riga.nome}`
      }
      style={({ pressed }) => [stili.riga, incerta ? stili.incerta : null, pressed ? stili.premuta : null]}
    >
      {!prima ? <View style={stili.separatore} /> : null}
      {/* Nella riga da controllare la quantità non si mostra: il parser non
          l'ha capita, e un «q.b.» lì direbbe una cosa che nessuno ha scritto. */}
      <Text style={[stili.quantita, quantita.qb ? stili.qb : null]} numberOfLines={2}>
        {incerta ? '' : quantita.testo}
      </Text>
      <View style={stili.nomeBlocco}>
        <Text style={stili.nome} numberOfLines={incerta ? 3 : 2}>
          {riga.nome}
        </Text>
        {incerta ? (
          <View style={stili.nota}>
            <View style={stili.pallino} />
            <Text style={stili.notaTesto}>{t('modifica.riga.incerta', lingua)}</Text>
          </View>
        ) : null}
      </View>
      <Segno nome="freccia" dimensione={14} colore={colori.testoTenue} />
    </Pressable>
  );
}

const creaStili = (colori: Colori) =>
  StyleSheet.create({
    riga: {
      flexDirection: 'row',
      alignItems: 'center',
      gap: SPAZIO.m,
      minHeight: 48,
      paddingVertical: SPAZIO.s,
      paddingLeft: 14,
      paddingRight: SPAZIO.m,
    },
    incerta: { backgroundColor: colori.attenzioneTenue },
    premuta: { backgroundColor: colori.bordo },
    // Il separatore parte dove comincia il nome, come nelle righe di
    // Impostazioni: la colonna delle quantità resta pulita.
    separatore: {
      position: 'absolute',
      top: 0,
      left: 14 + 72 + SPAZIO.m,
      right: 0,
      height: StyleSheet.hairlineWidth,
      backgroundColor: colori.bordo,
    },
    quantita: {
      minWidth: 72,
      maxWidth: 120,
      textAlign: 'right',
      ...TESTO.corpo,
      fontWeight: '600',
      fontVariant: ['tabular-nums'],
      color: colori.testo,
    },
    qb: { fontWeight: '400', color: colori.testoTenue },
    nomeBlocco: { flex: 1, gap: 2 },
    nome: { ...TESTO.corpo, color: colori.testo },
    nota: { flexDirection: 'row', alignItems: 'center', gap: 6 },
    pallino: { width: 8, height: 8, borderRadius: 4, backgroundColor: colori.attenzione },
    notaTesto: { ...TESTO.piccolo, color: colori.testoTenue },
  });