import { BackgroundContext } from "design-system/hooks/useBackgroundColor";
import { BoxTokens, useResolveBoxTokens } from "design-system/hooks/useResolveBoxTokens";
import { RemoveStyle } from "design-system/tools/useStyle";
import React, { useContext } from "react";
import { SafeAreaView, SafeAreaViewProps } from "react-native-safe-area-context";

// If an emtpy SafeAreaView is placed to handle insets then its ignored, this ensures the insets area always applied
const styleFix = { minHeight: 1 };
export type SafeAreaBoxProps = BoxTokens & RemoveStyle<SafeAreaViewProps>;
export const SafeAreaBox = ({ children, ...props }: SafeAreaBoxProps) => {
  const { tokenStyles, paddingValues, style, ...rest } = useResolveBoxTokens(props);
  const color = useContext(BackgroundContext);
  return (
    <BackgroundContext.Provider value={tokenStyles.backgroundColor ?? color}>
      <SafeAreaView style={[tokenStyles, paddingValues, styleFix, style]} {...rest}>
        {children}
      </SafeAreaView>
    </BackgroundContext.Provider>
  );
};