import React from "react";
import { View, ViewStyle } from "react-native";

import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
import {
  selectRemoteConfigurations,
  useAppSelector,
} from "@applicaster/zapp-react-native-redux";

import { getBackgroundImageUrl } from "../Layout/utils";

const baseBackgroundStyles = (imageUrl, backgroundColor) =>
  ({
    position: "absolute",
    left: 0,
    top: 0,
    right: 0,
    bottom: 0,
    zIndex: -1,
    backgroundSize: "cover",
    background: imageUrl
      ? `url(${imageUrl}) no-repeat top center ${backgroundColor}`
      : backgroundColor,
  }) as ViewStyle;

export const BackgroundImage = ({ children }: React.PropsWithChildren) => {
  const theme = useTheme();

  const remoteConfigurations = useAppSelector(selectRemoteConfigurations);

  const backgroundColor = theme.app_background_color;
  const backgroundImageUrl = getBackgroundImageUrl(remoteConfigurations);

  return (
    <View
      id="background"
      style={baseBackgroundStyles(backgroundImageUrl, backgroundColor)}
    >
      {children}
    </View>
  );
};