import React from "react";
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  ViewStyle,
  TextStyle,
  I18nManager,
} from "react-native";
import Badge from "../Badges/Badge";
import { useTheme, ThemeType } from "../../theme";

interface RewardItemProps {
  icon: React.ReactNode;
  activeIcon: React.ReactNode;
  isActive?: boolean;

  inactiveIconStyle?: ViewStyle;
  activeIconStyle?: ViewStyle;

  title: string;
  description: string;
  status: string;
  statusBgColor: string;
  statusTextColor: string;

  isRTL?: boolean;

  containerStyle?: ViewStyle;
  badgeStyle?: ViewStyle;
  textContainerStyle?: ViewStyle;
  titleTextStyle?: TextStyle;
  descriptionTextStyle?: TextStyle;
  statusBadgeStyle?: ViewStyle;
  statusTextStyle?: TextStyle;
}

const RewardItem: React.FC<RewardItemProps> = ({
  icon,
  title,
  description,
  status,
  statusBgColor,
  statusTextColor,
  activeIcon,
  isActive,
  inactiveIconStyle,
  activeIconStyle,
  isRTL = false,
  containerStyle,
  badgeStyle,
  textContainerStyle,
  titleTextStyle,
  descriptionTextStyle,
  statusBadgeStyle,
  statusTextStyle,
}) => {
  const {theme, isRTL: rtl} = useTheme();
  isRTL = rtl;
  const styles = themedStyles(theme);

  return (
    <View
      style={[
        styles.rewardItemContainer,
        { flexDirection: isRTL ? "row-reverse" : "row" },
        containerStyle,
      ]}
    >
      <Badge
        style={[
          styles.badgeStyle,
          { marginRight: isRTL ? 0 : 15, marginLeft: isRTL ? 15 : 0 },
          badgeStyle,
        ]}
        isActive={isActive}
        icon={icon}
        activeIcon={activeIcon}
        inactiveStyle={inactiveIconStyle}
        activeStyle={activeIconStyle}
      />
      <View style={[styles.rewardTextContainer, textContainerStyle]}>
        <Text
          style={[
            styles.rewardTitle,
            titleTextStyle,
            isRTL && { textAlign: "right" },
          ]}
        >
          {title}
        </Text>
        <Text
          style={[
            styles.rewardDescription,
            descriptionTextStyle,
            isRTL && { textAlign: "right" },
          ]}
        >
          {description}
        </Text>
      </View>
      <View
        style={[
          styles.statusBadge,
          { backgroundColor: statusBgColor },
          { right: isRTL ? undefined : 10, left: isRTL ? 10 : undefined },
          statusBadgeStyle,
        ]}
      >
        <Text
          style={[
            styles.statusText,
            { color: statusTextColor },
            statusTextStyle,
          ]}
        >
          {status}
        </Text>
      </View>
    </View>
  );
};

const themedStyles = (theme: ThemeType) =>
  StyleSheet.create({
    rewardItemContainer: {
      alignItems: "center",
      backgroundColor: theme.surface,
      borderRadius: 15,
      padding: 15,
      marginBottom: 15,
      width: "100%",
      borderWidth: 1,
      borderColor: theme.border,
    },
    badgeStyle: {
      borderRadius: 10,
      alignItems: "center",
      justifyContent: "center",
    },
    rewardTextContainer: {
      flex: 1,
    },
    rewardTitle: {
      fontSize: 16,
      fontWeight: "bold",
      color: theme.text,
      marginBottom: 4,
      textAlign: "left",
    },
    rewardDescription: {
      fontSize: 13,
      color: theme.helper,
      lineHeight: 18,
      textAlign: "left",
    },
    statusBadge: {
      paddingVertical: 4,
      paddingHorizontal: 8,
      borderRadius: 8,
      top: 10,
      position: "absolute",
      alignSelf: "flex-start",
      marginTop: 4,
    },
    statusText: {
      fontSize: 12,
      fontWeight: "bold",
    },
  });

export default RewardItem;