import * as React from "react";
import Image from "./Image";
import { usePlayer } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayer";

type DynamicBadgeProps = {
  cellUUID?: string;
  uri?: string;
};

const DynamicBadgeComponent = (props: DynamicBadgeProps) => {
  const { cellUUID: playerId } = props;

  // TODO: Initial value should depends on player state (playing or not)
  const [showImage, setShowImage] = React.useState(true);
  const player = usePlayer(playerId);
  const uri = props?.uri;

  React.useEffect(() => {
    if (playerId && player) {
      return player.addListener({
        id: `dynamic-badges-${uri}`,
        listener: {
          onPlayerClose: () => {
            setShowImage(true);
          },
          onVideoEnd: () => {
            setShowImage(true);
          },
          onLoad() {
            setShowImage(false);
          },
          onError() {
            setShowImage(true);
          },
        },
      });
    } else {
      setShowImage(true);
    }
  }, [player, uri]);

  if (!showImage) {
    return null;
  }

  return <Image {...props} />;
};

export const DynamicBadge = React.memo<DynamicBadgeProps>(
  DynamicBadgeComponent
);