import React, { useEffect, useState } from "react";
import {
  ImageSourcePropType,
  StyleProp,
  ViewStyle,
  View,
  TextStyle,
  DimensionValue,
  StyleSheet,
  Image,
  ImageURISource,
  I18nManager,
} from "react-native";
import Card from "../Card";
import { useTheme } from "../../../theme/ThemeContext"; 
import { ThemeType } from "../../../theme";
import { LockOverlay } from "../../LockOverlay";
import { ThemedText as Text } from "../../ui";

interface SelaDealCardProps {
  variant: "horizontal" | "vertical";
  backgroundImage: ImageURISource;
  label?: string;
  labelStyle?: StyleProp<TextStyle>;
  labelContainerStyle?: StyleProp<ViewStyle>;
  providerName?: string;
  providerNameStyle?: StyleProp<TextStyle>;
  description?: string;
  descriptionStyle?: StyleProp<TextStyle>;
  price?: string;
  priceStyle?: StyleProp<TextStyle>;
  priceContainerStyle?: StyleProp<ViewStyle>;
  onPress?: () => void;
  style?: StyleProp<ViewStyle>; // Overall card style
  width?: DimensionValue;
  height?: DimensionValue;
  isRTL?: boolean;
  borderRadius?: number;
  contentColor?: string; // For text like providerName, description on the image
  labelBackgroundColor?: string;
  labelTextColor?: string;
  priceContainerBlur?: number;
  priceBackgroundColor?: string;
  priceTextColor?: string;
  darkOverlayEnabled?: boolean; // New prop
  darkOverlayColor?: string; // New prop for custom overlay color
  lockOverlay?: boolean;
  showGrayscale?: boolean;
  lockIcon?: React.ReactNode;
  itemId?: string;
  gestureHandler?: boolean
}

const SelaDealCard: React.FC<SelaDealCardProps> = ({
  variant,
  backgroundImage,
  label,
  labelStyle,
  labelContainerStyle,
  providerName,
  providerNameStyle,
  description,
  descriptionStyle,
  price,
  priceStyle,
  priceContainerStyle,
  itemId,
  onPress,
  style,
  width = "100%",
  height,
  isRTL: propIsRTL,
  borderRadius = 12, // Default based on images
  darkOverlayEnabled = true,
  darkOverlayColor = "rgba(0, 0, 0, 0.3)",
  lockOverlay = false,
  lockIcon,
  priceContainerBlur,
  showGrayscale = false,
  gestureHandler = false
}) => {
  const { theme, isRTL: themeIsRTL } = useTheme();
  const isRTL = propIsRTL !== undefined ? propIsRTL : themeIsRTL;

  const styles = getStyles(theme, isRTL);

  const [dynamicHeight, setDynamicHeight] = useState<number>();

  useEffect(() => {
    if (
      height === undefined &&
      typeof width == "number" &&
      width &&
      backgroundImage &&
      backgroundImage.uri
    ) {
      Image.getSize(backgroundImage.uri, (imgWidth, imgHeight) => {
        if (imgWidth > 0 && imgHeight > 0) {
          const aspectRatio = imgHeight / imgWidth;
          setDynamicHeight(width * aspectRatio);
        } else {
          setDynamicHeight(200);
        }
      });
    } else if (height !== undefined) {
      setDynamicHeight(undefined);
    }
  }, [backgroundImage, height, width]);

  const finalLabelContainerStyle: StyleProp<ViewStyle> = [
    styles.labelContainerBase,
    labelContainerStyle,
  ];
  const finalLabelStyle: StyleProp<TextStyle> = [
    styles.labelTextBase,
    labelStyle,
  ];

  const finalPriceContainerStyle: StyleProp<ViewStyle> = [
    styles.priceContainerBase,
    variant === "horizontal"
      ? styles.priceContainerHorizontal
      : styles.priceContainerVertical,
    priceContainerStyle,
  ];
  const finalPriceStyle: StyleProp<TextStyle> = [
    styles.priceTextBase,
    priceStyle,
  ];

  const providerTextStyle: StyleProp<TextStyle> = [
    styles.providerNameBase,
    { color: theme.onSurface},
    providerNameStyle,
  ];

  const descriptionTextStyle: StyleProp<TextStyle> = [
    styles.descriptionBase,
    { color: theme.onSurface},
    descriptionStyle,
  ];

  return (
    <Card
      onPress={onPress}
      style={[
        styles.cardBase,
        { borderRadius, width, height: dynamicHeight || height },
        style,
      ]}
      gestureHandler={gestureHandler}
      greyscale={showGrayscale}
      backgroundImage={{
        source: backgroundImage,
        resizeMode: "cover",
        id: itemId
      }}
    >
      {darkOverlayEnabled && (
        <View
          style={[
            StyleSheet.absoluteFill,
            { backgroundColor: darkOverlayColor },
            { borderRadius: borderRadius },
          ]}
        />
      )}

      <LockOverlay
        visible={lockOverlay}
        contentPosition={"top-right"}
        icon={lockIcon}
        // iconSize={24}  
        onPress={onPress}
        text={""}
        overlayOpacity={0.4}
      />

      <View style={styles.overlayContainer}>
        <View
          style={[
            styles.topSection,
            // {
            //   alignItems: "flex-start",
            // },
          ]}
        >
          {label && (
            <View style={finalLabelContainerStyle}>
              <Text style={finalLabelStyle}>{label}</Text>
            </View>
          )}
        </View>

        {variant === "horizontal" ? (
          <View style={styles.bottomContentHorizontal}>
            <View style={styles.textBlockHorizontal}>
              {providerName && (
                <Text style={providerTextStyle}>{providerName}</Text>
              )}
              {description && (
                <Text style={descriptionTextStyle}>{description}</Text>
              )}
            </View>
            {price && (
              <View style={finalPriceContainerStyle}>
                <Text style={finalPriceStyle}>{price}</Text>
              </View>
            )}
          </View>
        ) : (
          <View style={styles.bottomContentVertical}>
            <View style={styles.textBlockVertical}>
              {providerName && (
                <Text style={providerTextStyle}>{providerName}</Text>
              )}
              {description && (
                <Text style={descriptionTextStyle}>{description}</Text>
              )}
            </View>
            {price && !priceContainerBlur && (
              <View
                style={[
                  { backgroundColor: theme.primary },
                  finalPriceContainerStyle,
                ]}
              >
                <Text style={finalPriceStyle}>{price}</Text>
              </View>
            )}
          </View>
        )}
      </View>
    </Card>
  );
};

const getStyles = (theme: ThemeType, isRTL: boolean) =>
  StyleSheet.create({
    cardBase: {
      overflow: "hidden",
      position: "relative",
    },
    overlayContainer: {
      flex: 1,
      padding: 16,
      justifyContent: "space-between",
    },
    topSection: {
      flexDirection:"row",
    },
    labelContainerBase: {
      paddingVertical: 6,
      paddingHorizontal: 12,
      borderRadius: 8,
      backgroundColor: theme.background,
    },
    labelTextBase: {
      fontWeight: "600",
      fontSize: 13,
      color: theme.onBackground,
    },
    providerNameBase: {
      fontSize: 20,
      marginBottom: 2,
      color: theme.secondary,
    },
    descriptionBase: {
      fontSize: 14,
      color: theme.helper,
    },
    priceContainerBase: {
      paddingVertical: 8,
      paddingHorizontal: 16,
      borderRadius: 10,
      overflow: "hidden",
      backgroundColor: theme.primary,
    },
    priceTextBase: {
      fontSize: 16,
      color: theme.onPrimary,
    },
    bottomContentHorizontal: {
      flexDirection: "row",
      alignItems: "flex-end",
    },
    textBlockHorizontal: {
      flex: 1,
      alignItems:"flex-start",
      marginRight: 10,
    },
    priceContainerHorizontal: {},
    bottomContentVertical: {
      flexDirection: "column",
    },
    textBlockVertical: {
      marginBottom: 12,
      alignItems:"flex-start"
    },
    priceContainerVertical: {
      alignSelf: "stretch",
      alignItems: "center",
    },
  });

export default SelaDealCard;