/**
 * La sezione Ricette del menù: contiene la pila dello sfoglia (Categorie,
 * Elenco); sugli schermi larghi, accanto, il pannello della ricetta: quella
 * scelta nell'elenco, o l'invito se non ce n'è una.
 */
import { View, StyleSheet } from 'react-native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

import type { ParametriSfoglia } from '../navigazione.ts';
import { useApp } from '../contesto.ts';
import { INTESTAZIONE_DI_SISTEMA, useOpzioniPila } from '../componenti/Intestazione.tsx';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { usePannelli } from '../pannelli.ts';
import { t } from '../../i18n/index.ts';
import { useColori } from '../tema.ts';
import SchedaRicetta from '../componenti/SchedaRicetta.tsx';
import Invito from '../componenti/Invito.tsx';
import SopraIlMenu from '../componenti/SopraIlMenu.tsx';
import Categorie from './Categorie.tsx';
import Elenco from './Elenco.tsx';

const Sfoglia = createNativeStackNavigator<ParametriSfoglia>();

export default function SezioneRicette() {
  const { lingua } = useApp();
  const colori = useColori();
  const { due, larghezzaSfoglia, selezionata, scegli } = usePannelli();
  // Sull'iPhone Duo la colonna di sistema sta sul bordo destro: con due
  // pannelli il margine lo lascia il pannello della ricetta, che quel bordo lo
  // tocca, e non lo sfoglia, che finisce sulla piega (useOpzioniPila).
  const opzioniPilaSistema = useOpzioniPila(!due);
  const destra = useSafeAreaInsets().right;
  return (
    <SopraIlMenu style={stili.riga}>
      <View
        style={
          due
            ? [stili.sfogliaAccanto, { width: larghezzaSfoglia, borderRightColor: colori.bordo }]
            : stili.sfoglia
        }
      >
        <Sfoglia.Navigator
          initialRouteName="Categorie"
          screenOptions={opzioniPilaSistema}
        >
          <Sfoglia.Screen name="Categorie" component={Categorie} options={{ title: t('app.nome', lingua) }} />
          <Sfoglia.Screen name="Elenco" component={Elenco} />
        </Sfoglia.Navigator>
      </View>
      {due && (
        <View style={[stili.ricetta, INTESTAZIONE_DI_SISTEMA && { paddingRight: destra }]}>
          {selezionata === null ? (
            <Invito />
          ) : (
            <SchedaRicetta
              key={selezionata}
              ricettaId={selezionata}
              onIndietro={null}
              onSparita={() => scegli(null)}
            />
          )}
        </View>
      )}
    </SopraIlMenu>
  );
}

const stili = StyleSheet.create({
  riga: { flexDirection: 'row' },
  sfoglia: { flex: 1 },
  sfogliaAccanto: { borderRightWidth: StyleSheet.hairlineWidth },
  ricetta: { flex: 1 },
});