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

export type BoxProps = BoxTokens & RemoveStyle<SafeAreaViewProps>;
export const AnimatedBox = forwardRef<Animated.View, BoxProps>(({ children, ...props }, ref) => {
  const { tokenStyles, paddingValues, style, ...rest } = useResolveBoxTokens(props);
  const color = useContext(BackgroundContext);

  return (
    <BackgroundContext.Provider value={tokenStyles.backgroundColor ?? color}>
      <Animated.View ref={ref} style={[tokenStyles, paddingValues, style]} {...rest}>
        {children}
      </Animated.View>
    </BackgroundContext.Provider>
  );
});