/**
 * La testata dei fogli che salgono dal basso: maniglia, a sinistra il comando
 * che chiude, al centro il titolo, a destra quello che conferma. È la forma
 * dei fogli di iPhone («Annulla», titolo, «Aggiungi»), e i due comandi hanno
 * la stessa larghezza così il titolo resta al centro.
 *
 * Il comando a destra, spento, resta scritto in tenue e senza grassetto: si
 * capisce che c'è e che adesso non si può.
 *
 * I colori non si scrivono qui: vengono da tema.ts, come nelle altre schermate.
 */
import { useLayoutEffect, useMemo } from 'react';
import { Pressable, StyleSheet, Text, View } from 'react-native';

import type { Colori } from '../tema.ts';
import { SPAZIO, TESTO, useColori } from '../tema.ts';
import { useConsegnaTesta } from './FoglioDiSistema.tsx';

export interface PropsTestaFoglio {
  titolo: string;
  sinistra?: { testo: string; onPress: () => void };
  destra?: { testo: string; onPress: () => void; spento?: boolean };
}

export function TestaFoglio({ titolo, sinistra, destra }: PropsTestaFoglio) {
  const colori = useColori();
  const stili = useMemo(() => creaStili(colori), [colori]);
  // Dentro il foglio di sistema dell'iPhone la testata la disegna il foglio,
  // con i comandi di vetro: qui si consegnano titolo e comandi, e basta.
  const consegna = useConsegnaTesta();
  useLayoutEffect(() => {
    consegna?.({ titolo, sinistra, destra });
  });
  if (consegna !== null) return null;
  return (
    <View>
      <View style={stili.maniglia} />
      <View style={stili.testa}>
        <View style={stili.lato}>
          {sinistra !== undefined ? (
            <Pressable onPress={sinistra.onPress} hitSlop={8} accessibilityRole="button" style={stili.tasto}>
              <Text style={stili.sinistra} numberOfLines={1}>{sinistra.testo}</Text>
            </Pressable>
          ) : null}
        </View>
        <Text style={stili.titolo} numberOfLines={1} accessibilityRole="header">
          {titolo}
        </Text>
        <View style={[stili.lato, stili.latoDestro]}>
          {destra !== undefined ? (
            <Pressable
              onPress={destra.onPress}
              disabled={destra.spento === true}
              hitSlop={8}
              accessibilityRole="button"
              accessibilityState={{ disabled: destra.spento === true }}
              style={stili.tasto}
            >
              <Text style={destra.spento === true ? stili.destraSpenta : stili.destra} numberOfLines={1}>
                {destra.testo}
              </Text>
            </Pressable>
          ) : null}
        </View>
      </View>
    </View>
  );
}

const creaStili = (colori: Colori) =>
  StyleSheet.create({
    maniglia: {
      alignSelf: 'center',
      width: 38,
      height: 5,
      borderRadius: 3,
      backgroundColor: colori.bordo,
      marginTop: SPAZIO.s,
      marginBottom: SPAZIO.xs,
    },
    testa: { flexDirection: 'row', alignItems: 'center', minHeight: 44, paddingHorizontal: SPAZIO.l },
    lato: { width: 96, flexDirection: 'row' },
    latoDestro: { justifyContent: 'flex-end' },
    tasto: { minHeight: 44, justifyContent: 'center' },
    titolo: { flex: 1, textAlign: 'center', ...TESTO.corpo, fontWeight: '600', color: colori.testo },
    sinistra: { ...TESTO.corpo, color: colori.accento },
    destra: { ...TESTO.corpo, fontWeight: '600', color: colori.accento },
    destraSpenta: { ...TESTO.corpo, color: colori.testoTenue },
  });