/**
 * La pagina di partenza. 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 { 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 Categorie from './Categorie.tsx';
import Elenco from './Elenco.tsx';

const Sfoglia = createNativeStackNavigator<ParametriSfoglia>();

export default function Principale() {
  const { lingua } = useApp();
  const colori = useColori();
  const { due, larghezzaSfoglia, selezionata, scegli } = usePannelli();
  return (
    <View style={stili.riga}>
      <View
        style={
          due
            ? [stili.sfogliaAccanto, { width: larghezzaSfoglia, borderRightColor: colori.bordo }]
            : stili.sfoglia
        }
      >
        <Sfoglia.Navigator
          initialRouteName="Categorie"
          screenOptions={{ headerShown: false, contentStyle: { backgroundColor: colori.fondo } }}
        >
          <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}>
          {selezionata === null ? (
            <Invito />
          ) : (
            <SchedaRicetta
              key={selezionata}
              ricettaId={selezionata}
              onIndietro={null}
              onSparita={() => scegli(null)}
            />
          )}
        </View>
      )}
    </View>
  );
}

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