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

import { imageSrcFromMediaItem } from "@applicaster/zapp-react-native-utils/configurationUtils";
import {
  AnimationComponent,
  ComponentAnimationType,
  useModalAnimationContext,
  PlayerAnimationStateEnum,
} from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";

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,
  defaultImageDimensions,
}: Props) => {
  const source = React.useMemo(
    () => ({ uri: imageSrcFromMediaItem(entry, imageKey) }),
    [imageKey, entry]
  );

  const { playerAnimationState } = useModalAnimationContext();

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

  return (
    <View
      style={
        playerAnimationState === PlayerAnimationStateEnum.maximize
          ? defaultImageDimensions
          : style
      }
    >
      <AnimationComponent
        style={style}
        animationType={ComponentAnimationType.player}
        additionalData={defaultImageDimensions}
      >
        <ImageBackground
          resizeMode="cover"
          style={imageSize}
          imageStyle={imageStyle}
          source={source}
        >
          {children}
        </ImageBackground>
      </AnimationComponent>
    </View>
  );
};

export const PlayerImageBackground = React.memo(PlayerImageBackgroundComponent);