/**
 * Il foglio piccolo col nome di una sezione: per crearne una nuova («Nuova
 * sezione») o per rinominarla (dal menù della sezione).
 *
 * Il nome si chiede prima di creare la sezione: prima «Aggiungi sezione»
 * creava un gruppo senza nome con una riga vuota dentro, e il segnaposto del
 * nome diceva di nuovo «Aggiungi sezione», le stesse parole del bottone. Per
 * questo qui c'è un esempio, «Es. Per la crema», e il nome è obbligatorio.
 *
 * I colori non si scrivono qui: vengono da tema.ts, come nelle altre schermate.
 */
import { useMemo, useRef, useState } from 'react';
import type { TextInput } from 'react-native';
import { StyleSheet, View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

import { useApp } from '../contesto.ts';
import type { Colori } from '../tema.ts';
import { SPAZIO, useColori } from '../tema.ts';
import { CampoTesto } from './Campo.tsx';
import { Foglio } from './Foglio.tsx';
import { TestaFoglio } from './TestaFoglio.tsx';
import { VESTE_FOGLIO } from './FoglioDiSistema.tsx';

export type PropsFoglioSezione = {
  visibile: boolean;
  /** 'nuova' crea, 'rinomina' cambia il nome di una che c'è. */
  modo: 'nuova' | 'rinomina';
  nomeIniziale: string;
  onConferma: (nome: string) => void;
  onChiudi: () => void;
};

export function FoglioSezione({ visibile, modo, nomeIniziale, onConferma, onChiudi }: PropsFoglioSezione) {
  const { testo } = useApp();
  const colori = useColori();
  const stili = useMemo(() => creaStili(colori), [colori]);
  const sotto = useSafeAreaInsets().bottom;
  const [nome, setNome] = useState(nomeIniziale);
  const campo = useRef<TextInput>(null);

  // Ogni apertura riparte da capo già nel primo disegno (stato derivato), non
  // un attimo dopo come farebbe un effetto.
  const [apertoPrima, setApertoPrima] = useState(visibile);
  if (visibile !== apertoPrima) {
    setApertoPrima(visibile);
    if (visibile) setNome(nomeIniziale);
  }

  const valido = nome.trim() !== '';
  const conferma = () => {
    if (!valido) return;
    onConferma(nome.trim());
    onChiudi();
  };

  return (
    <Foglio visibile={visibile} onChiudi={onChiudi} evitaTastiera onAperto={() => campo.current?.focus()}>
      <View style={[stili.foglio, { paddingBottom: SPAZIO.l + sotto }, VESTE_FOGLIO]}>
        <TestaFoglio
          titolo={testo(modo === 'nuova' ? 'sezione.nuova' : 'sezione.rinomina')}
          sinistra={{ testo: testo('modifica.annulla'), onPress: onChiudi }}
          destra={{ testo: testo(modo === 'nuova' ? 'sezione.crea' : 'sezione.fatto'), onPress: conferma, spento: !valido }}
        />
        <View style={stili.dentro}>
          <CampoTesto
            etichetta={testo('sezione.nome')}
            placeholder={testo('sezione.nome.esempio')}
            value={nome}
            onChangeText={setNome}
            ref={campo}
            returnKeyType="done"
            onSubmitEditing={conferma}
          />
        </View>
      </View>
    </Foglio>
  );
}

const creaStili = (colori: Colori) =>
  StyleSheet.create({
    foglio: { backgroundColor: colori.fondo, borderTopLeftRadius: 22, borderTopRightRadius: 22 },
    dentro: { paddingHorizontal: SPAZIO.l, paddingTop: SPAZIO.s },
  });