/**
 * This intends to wrap every screen in ChainIT
 * so that every screen contains a SafeAreaView and other screen-global components.
 * For example, we have an environment indicator above every screen for debugging / testing purposes (disabled in production).
 */

import { SafeAreaView, View } from 'react-native';
import { Text } from '../components';
import { ENVIRONMENT, tw, useTheme } from '../core';

export interface AppLayoutProps {
  children: JSX.Element | JSX.Element[];
  style?: any;
}

export function VersionHeader() {
  const { primary } = useTheme();
  return (
    <View
      pointerEvents="none"
      style={tw.style('absolute z-100 top-12 bg-white/25 px-2', {
        hidden: ENVIRONMENT === 'production',
      })}
    >
      <Text style={tw`font-bold text-xl text-[${primary}]`}>{ENVIRONMENT}</Text>
    </View>
  );
}

export const APP_LAYOUT_SAFE_AREA_STYLE = tw`flex-1 bg-dark`;

export const AppLayout = ({ children, style }: AppLayoutProps) => (
  <SafeAreaView style={[APP_LAYOUT_SAFE_AREA_STYLE, style]}>{children}</SafeAreaView>
);