import * as React from "react";
import { View, ViewProps, SafeAreaView as RNSafeAreaView } from "react-native";

import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
import { useDimensions } from "@applicaster/zapp-react-native-utils/reactHooks";

type Props = {
  strict?: boolean;
  children: React.ComponentClass | React.FC;
} & ViewProps;

function SafeAreaViewAndroid(props: Props) {
  const screen = useDimensions("screen");
  const window = useDimensions("window");

  const safeAreaStyles = React.useMemo(() => {
    const isLandscape = screen.width > screen.height;
    const dimensionName = isLandscape ? "width" : "height";

    const paddingPropName = isLandscape
      ? "paddingHorizontal"
      : "paddingVertical";

    const paddingValue =
      (screen[dimensionName] - window[dimensionName]) / (props?.strict ? 1 : 2);

    const paddingProps = { [paddingPropName]: paddingValue };

    return {
      flex: 1,
      ...paddingProps,
    };
  }, [screen.width, screen.height, window.width, window.height]);

  return (
    <View style={[safeAreaStyles, props?.style || {}]}>{props?.children}</View>
  );
}

export const SafeAreaView = platformSelect({
  ios: RNSafeAreaView,
  android: SafeAreaViewAndroid,
});