import React from "react";
import {
  StyleSheet,
  Text,
  ViewStyle,
  TextStyle,
  ImageSourcePropType,
  DimensionValue,
  View,
  ImageStyle,
} from "react-native";
import { Card, CardFooter } from "../Card";
import { useTheme, ThemeType } from "../../theme";
import { TouchableOpacity } from "react-native-gesture-handler";

export interface BannerProps {
  backgroundImage: ImageSourcePropType;
  buttonText?: string;
  onButtonPress?: () => void;
  onBannerPress?: () => void;
  containerStyle?: ViewStyle;
  backgroundImageStyle?: ImageStyle;
  contentContainerStyle?: ViewStyle;
  buttonStyle?: ViewStyle;
  buttonTextStyle?: TextStyle;
  height?: DimensionValue;
  customButton?: React.ReactNode;
  contentAlignment?: "top" | "center" | "bottom";
  
  // New icon props
  icon?: React.ReactNode;
  iconPosition?: "left" | "right";
  iconStyle?: ViewStyle;
  iconSpacing?: number;
}

/**
 * A customizable banner component with background image and action button
 */
const Banner: React.FC<BannerProps> = ({
  backgroundImage,
  buttonText = "Redeem",
  onButtonPress,
  onBannerPress,
  containerStyle,
  backgroundImageStyle,
  contentContainerStyle,
  buttonStyle,
  buttonTextStyle,
  height = 300,
  customButton,
  contentAlignment = "center",
  
  // Icon props with defaults
  icon,
  iconPosition = "left",
  iconStyle,
  iconSpacing = 8,
}) => {
  const {theme} = useTheme();
  // Handle banner press if provided
  const handlePress = onBannerPress ? onBannerPress : undefined;

  // Render the button with optional icon
  const renderButton = () => {
    if (customButton) {
      return customButton;
    }
    
    if (!buttonText) {
      return null;
    }
    
    return (
      <TouchableOpacity
        style={[styles.button, {borderColor: theme.primary}, buttonStyle]}
        onPress={onButtonPress}
        accessibilityRole="button"
        accessibilityLabel={buttonText}
      >
        <View style={[styles.buttonContent, { flexDirection: iconPosition === "left" ? "row" : "row-reverse" }]}>
          {icon && (
            <View 
              style={[
                styles.iconContainer, 
                { 
                  marginRight: iconPosition === "left" ? iconSpacing : 0,
                  marginLeft: iconPosition === "right" ? iconSpacing : 0 
                },
                iconStyle
              ]}
              accessible={false}
              importantForAccessibility="no-hide-descendants"
            >
              {icon}
            </View>
          )}
          <Text style={[styles.buttonText, {color: theme.primary}, buttonTextStyle]}>
            {buttonText}
          </Text>
        </View>
      </TouchableOpacity>
    );
  };

  return (
    <Card
      style={[{ height }, containerStyle]}
      backgroundImage={{
        source: backgroundImage,
        resizeMode: "cover",
        imageStyle: backgroundImageStyle,
      }}
      onPress={handlePress}
    >
      <CardFooter 
        justifyContent="center" 
        style={[
          styles.footer,
          contentAlignment === "top" ? styles.footerTop : 
          contentAlignment === "center" ? styles.footerCenter : 
          styles.footerBottom,
          contentContainerStyle
        ]}
      >
        {renderButton()}
      </CardFooter>
    </Card>
  );
};

const styles = StyleSheet.create({
  footer: {
    position: "absolute",
    left: 0,
    right: 0,
  },
  footerTop: {
    top: 0,
  },
  footerCenter: {
    top: "50%",
    transform: [{ translateY: -20 }], // Approximate button height offset
  },
  footerBottom: {
    bottom: 0,
  },
  button: {
    backgroundColor: "transparent",
    paddingHorizontal: 24,
    paddingVertical: 8,
    borderRadius: 8,
    borderWidth: 1,
    borderColor: "#FFFFFF",
  },
  buttonContent: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
  },
  iconContainer: {
    alignItems: "center",
    justifyContent: "center",
  },
  buttonText: {
    color: "#FFFFFF",
    fontSize: 14,
    fontWeight: "600",
    letterSpacing: 1,
  },
});

export default Banner;