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

// To enable this logic please add in the manifest of the plugin this code in style section:
/*
styles: {
  {
      group: true,
      label: "Close/Back button",
      tooltip:
        "These fields affect customization of the close/back button when full screen presented, otherwise button will be hidden",
      folded: true,
      fields: [
        {
          type: "switch",
          key: "close_button_hidden",
          label_tooltip: "Define if close/next button will be hidden",
          initial_value: true,
        },
        {
          type: "uploader",
          key: "close_button_image",
          label: "Close Button Image",
          label_tooltip: "Image for the close button of the screen.",
        },
      ],
    },
}
*/

type ActionButtonProps = Testable & {
  onPress: () => void;
  buttonStyles: any;
  imageUrl: string;
  imageStyle?: any;
};

const closeButtonStyle: any = {
  width: 50,
  height: 50,
  resizeMode: "contain",
};

const ActionButton = ({
  onPress,
  buttonStyles,
  imageUrl,
  imageStyle = closeButtonStyle,
  testID,
}: ActionButtonProps) => {
  return (
    <View style={buttonStyles} testID={testID}>
      <TouchableOpacity onPress={onPress} testID={`${testID}-touchable`}>
        <Image
          source={{ uri: imageUrl }}
          style={imageStyle}
          testID={`${testID}-image`}
        />
      </TouchableOpacity>
    </View>
  );
};

export default ActionButton;