import React, { FC } from 'react';
import {
  StyleSheet, KeyboardAvoidingView, Platform, View,
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { colors } from '@company/design';
import Constants from 'expo-constants';

interface Props {
  logonScreen?: boolean;
  variant?: 'white' | 'primary';
}

const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
    backgroundColor: colors.white,
  },
  safeAreaLogon: {
    backgroundColor: 'white',
  },
  container: {
    flex: 1,
  },
  center: {
    justifyContent: 'center',
  },
});

const variants = {
  white: StyleSheet.create({
    container: {
      backgroundColor: 'white',
    },
  }),
  primary: StyleSheet.create({
    container: {
      backgroundColor: colors.primary,
    },
  }),
};

export const ScreenWrapper: FC<Props> = ({
  logonScreen, children, variant,
}) => {
  const variantStyle = variants[variant || 'white'];
  const viewStyle = [
    styles.container,
    variantStyle.container,
    ...logonScreen ? [styles.center] : [],
  ];

  return (
    <SafeAreaView
      style={[
        styles.safeArea,
        ...logonScreen ? [styles.safeAreaLogon] : [],
      ]}
    >
      <View style={viewStyle}>
        {
          Platform.OS === 'ios'
            ? (
              <KeyboardAvoidingView
                style={{ flex: 1 }}
                behavior="padding"
                keyboardVerticalOffset={Constants.statusBarHeight}
              >
                {children}
              </KeyboardAvoidingView>
            )
            : children
        }
      </View>
    </SafeAreaView>
  );
};

export default null;