/**
 * Il contenitore delle pagine del menù. Su Android la barra in basso è opaca
 * e sta sopra l'app: senza questo il fondo delle liste e il + tondo finivano
 * sotto di lei (visto nella prova sull'emulatore). L'area sicura di
 * react-native-screens sa quanto è alta la barra, tasti di sistema compresi,
 * e ferma il contenuto lì. Su iPhone invece il contenuto scorre sotto il vetro
 * della tab bar, ed è il vetro a farsi vedere: lì è una View e basta.
 *
 * Quale dei due lo decide contenutoSopraIlMenu, in logica-menu.ts.
 *
 * La View di iPhone ha `collapsable={false}`: con un colore di fondo (come in
 * Impostazioni) React Native la monterebbe vuota davanti ai suoi figli, e il
 * menù di vetro, che cerca la lista da far scorrere solo lungo i primi figli,
 * non la troverebbe. Il perché per intero sta in Categorie.tsx.
 */
import type { ReactNode } from 'react';
import { Platform, StyleSheet, View } from 'react-native';
import type { StyleProp, ViewStyle } from 'react-native';
import { SafeAreaView } from 'react-native-screens/experimental';

import { contenutoSopraIlMenu } from '../logica-menu.ts';

export default function SopraIlMenu({ style, children }: { style?: StyleProp<ViewStyle>; children: ReactNode }) {
  if (!contenutoSopraIlMenu(Platform.OS)) {
    return (
      <View style={[stili.pieno, style]} collapsable={false}>
        {children}
      </View>
    );
  }
  return (
    <SafeAreaView edges={{ bottom: true }} insetType="all" style={[stili.pieno, style]}>
      {children}
    </SafeAreaView>
  );
}

const stili = StyleSheet.create({ pieno: { flex: 1 } });