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

import { imageSrcFromMediaItem } from "@applicaster/zapp-react-native-utils/configurationUtils";

type Props = PropsWithChildren<{
  entry: ZappEntry;
  style?: { [K: string]: any };
  imageStyle?: { [K: string]: any };
  imageKey?: string;
  defaultImageDimensions?: { [K: string]: any };
}>;

const imageSize = { width: "100%", height: "100%" };

const PlayerImageBackgroundComponent = ({
  entry,
  children,
  style,
  imageStyle,
  imageKey,
}: Props) => {
  const source = React.useMemo(
    () => ({ uri: imageSrcFromMediaItem(entry, [imageKey]) }),
    [imageKey, entry]
  );

  if (!source) return <>{children}</>;

  return (
    <View style={style}>
      <View style={style}>
        <ImageBackground
          resizeMode="cover"
          style={imageSize}
          imageStyle={imageStyle}
          source={source}
        >
          {children}
        </ImageBackground>
      </View>
    </View>
  );
};

export const PlayerImageBackground = React.memo(PlayerImageBackgroundComponent);