import React, { ComponentType } from 'react';
import { isIOS } from '../helpers/platform';
import { isLandscape } from '../helpers/isLandscape';
import { KeyboardAvoidingView as NativeKeyboardAvoidingView, ViewStyle, StyleProp } from 'react-native';
import { getInset } from 'react-native-safe-area-view';

const _APPBAR_HEIGHT = isIOS ? 44.0 : 56.0;
const _STATUSBAR_HEIGHT = isIOS ? 20.0 : 0.0;
const _HEADER_HEIGHT = _APPBAR_HEIGHT + _STATUSBAR_HEIGHT;

export type Props = {
  readonly children: React.ReactNode;
  readonly style?: StyleProp<ViewStyle>;
  readonly withNavigation?: boolean;
};

const getKeyboardVerticalOffset = (withNavigation: boolean | undefined, isIOS: boolean) => {
  // If IPX+: topInset = 44, statusBar = 10
  // If IP8-: topInset = 20, statusBar = 20
  const topInset = getInset('top', isLandscape);

  if (withNavigation === true && isIOS === true) {
    return _HEADER_HEIGHT + topInset - _STATUSBAR_HEIGHT;
  } else if (withNavigation === true && isIOS === false) {
    return _HEADER_HEIGHT + topInset;
  } else {
    return 0;
  }
};
const KeyboardAvoidingView: ComponentType<Props> = ({ children, style, withNavigation }: Props) => (
  <NativeKeyboardAvoidingView
    style={style}
    behavior={isIOS ? 'padding' : 'height'}
    keyboardVerticalOffset={getKeyboardVerticalOffset(withNavigation, isIOS)}
  >
    {children}
  </NativeKeyboardAvoidingView>
);

export default KeyboardAvoidingView;