import { useTheme } from "../../theme";
import React from "react";
import {
  TouchableOpacity,
  View,
  StyleSheet,
  ViewStyle,
  TextStyle,
  StyleProp,
  DimensionValue,
} from "react-native";
import { ThemedText as Text } from "../ui";

interface RedemptionOptionProps {
  // Required props
  icon: React.ReactNode;
  text: string;
  // Customization props
  orientation?: "vertical" | "horizontal";
  backgroundColor?: string;
  textColor?: string;
  width?: number | string;
  height?: number | string;
  borderRadius?: number;
  padding?: number;
  fontSize?: number;
  disabled?: boolean;
  isActive?: boolean;
  onPress?: () => void;
  containerStyle?: StyleProp<ViewStyle>;
  textStyle?: StyleProp<TextStyle>;
  iconContainerStyle?: StyleProp<ViewStyle>;
  activeOpacityValue?: number;
  isRTL?: boolean;
  textContainerStyle?: StyleProp<TextStyle>;
}

const RedemptionOption: React.FC<RedemptionOptionProps> = ({
  icon,
  text,
  orientation = "vertical",
  backgroundColor,
  textColor,
  width,
  height,
  borderRadius = 8,
  padding = 12,
  fontSize = 14,
  disabled = false,
  isActive = false,
  onPress,
  containerStyle,
  textStyle,
  iconContainerStyle,
  activeOpacityValue = 0.7,
  isRTL,
  textContainerStyle
}) => {
  const {theme} = useTheme();
  textColor = textColor || theme.onSurface;
  
  let dynamicContainerStyle: ViewStyle = {
    backgroundColor: backgroundColor || theme.surface,
    borderRadius,
    padding,
    borderWidth: isActive ? 2 : 0,
    borderColor: isActive ? textColor : undefined,
  };
  
  if (width) dynamicContainerStyle.width = width as DimensionValue;
  if (height) dynamicContainerStyle.height = height as DimensionValue;
  
  const dynamicTextStyle: TextStyle = {
    color: textColor,
    fontSize: fontSize
  };
  
  // Determine horizontal flex direction based on RTL
  const horizontalDirection: ViewStyle = {
    flexDirection: 'row',
    justifyContent: "flex-start",
    alignItems: "center",
    gap: 8
  };
  
  return (
    <TouchableOpacity
      style={[
        styles.container,
        orientation === "vertical" ? styles.vertical : horizontalDirection,
        dynamicContainerStyle,
        disabled && styles.disabled,
        containerStyle,
      ]}
      onPress={onPress}
      disabled={disabled}
      activeOpacity={activeOpacityValue}
      accessibilityRole="button"
      accessibilityState={{ disabled, selected: isActive }}
    >
      <View
        style={[
          styles.iconContainer,
          iconContainerStyle,
        ]}
      >
        {icon}
      </View>
      <View style={[{minHeight: 40, justifyContent: "center"}, textContainerStyle]}>
        <Text
          style={[
            styles.text,
            orientation === "horizontal"
              ? {}
              : styles.textVertical,
            dynamicTextStyle,
            textStyle,
          ]}
          numberOfLines={2}
          ellipsizeMode="tail"
          adjustsFontSizeToFit={orientation === "vertical"}
          minimumFontScale={0.8}
        >
          {text}
        </Text>
      </View>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  container: {
    alignItems: "center",
    justifyContent: "center"
  },
  vertical: {
    flexDirection: "column",
    justifyContent: "center",
  },
  horizontal: {
    // Base horizontal style is now handled dynamically with RTL support
    flexDirection: "row",
    justifyContent: "flex-start",
    alignItems: "center"
  },
  iconContainer: {
    // marginBottom: 8,
    justifyContent: "center",
    alignItems: "center",
  },
  iconHorizontal: {
  },
  text: {
    fontWeight: "500",
  },
  textVertical: {
    textAlign: "center",
  },
  disabled: {
    opacity: 0.6,
  },
});

export default RedemptionOption;