import React from 'react';

import { View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { useStyles, useNativeMergeStyles } from '@cleartrip/ct-design-style-manager';

import { getSafeAreaContainerStyles } from './style';
import { ISafeAreaContainer } from './type';

/**
 * React Native implementation of SafeAreaContainer.
 *
 * Reads real device insets via `react-native-safe-area-context` and
 * applies them as padding on a plain `<View>`. Styles flow through the
 * style-manager (`useStyles` for dynamic inset-driven values,
 * `useNativeMergeStyles` for merging consumer overrides) so the
 * component has zero dependency on aldenui's Container or legacy
 * `useStyles` hook.
 */
const SafeAreaContainer: React.FC<ISafeAreaContainer> = ({ children, styleConfig = {} }) => {
  const insets = useSafeAreaInsets();

  const containerStyles = useStyles(
    () => ({
      root: getSafeAreaContainerStyles({ insets }),
    }),
    [insets],
  );

  const { root: rootStyles = [] } = styleConfig || {};

  const mergedRootStyles = useNativeMergeStyles(
    [containerStyles.root, ...rootStyles],
    [containerStyles.root, styleConfig?.root],
  );

  return <View style={mergedRootStyles}>{children}</View>;
};

SafeAreaContainer.displayName = 'SafeAreaContainer';

export default SafeAreaContainer;