import * as React from "react";
import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
import { useScreenConfiguration } from "@applicaster/zapp-react-native-ui-components/Components/River/useScreenConfiguration";
import { ifEmptyUseFallback } from "@applicaster/zapp-react-native-utils/cellUtils";

export const useScreenBackgroundColor = (screenId: string): string => {
  const { backgroundColor: screenBackgroundColor } =
    useScreenConfiguration(screenId);

  const theme = useTheme();

  const themeBackgroundColor = React.useMemo(
    () => theme.app_background_color,
    [theme.app_background_color]
  );

  const backgroundColor = ifEmptyUseFallback(
    screenBackgroundColor,
    themeBackgroundColor
  );

  return backgroundColor;
};