import React from "react";
import { ImageFieldData } from "../App/common/interface/widgets/widgetData/TitleWidgetData";
import { Image, TouchableOpacity } from "react-native";
import { CtaData } from "../App/common/interface";
import { GenericActionPayload } from "../App/common/actions/GenericAction";

export const StyledImage = ({
  imageFieldData,
  handleClick,
  handleActions,
}: {
  imageFieldData: ImageFieldData;
  handleClick?: (ctaData: CtaData) => void;
  handleActions?: (
    value: any | undefined | null,
    actionPayloadList: GenericActionPayload | undefined,
  ) => void;
}) => {
  if (!imageFieldData?.url) return <></>;

  const { cta, actions } = imageFieldData;

  const isInteractive = (cta && handleClick) || (actions && handleActions);

  const handleImageClick = () => {
    if (actions && handleActions) {
      handleActions(null, actions);
    } else if (cta && handleClick) {
      handleClick(cta);
    }
  };

  return isInteractive ? (
    <TouchableOpacity activeOpacity={1} onPress={handleImageClick}>
      <Image
        source={{ uri: imageFieldData?.url }}
        style={imageFieldData?.imageStyle}
      />
    </TouchableOpacity>
  ) : (
    <Image
      source={{ uri: imageFieldData?.url }}
      style={imageFieldData?.imageStyle}
    />
  );
};