import React from "react";
import {
  ImageSourcePropType,
  StyleProp,
  ViewStyle,
  View,
  Text,
  TextStyle,
  useWindowDimensions,
} from "react-native";
import { Image } from 'expo-image';
import Card from "../Card";
import { useTheme } from "../../../theme/ThemeContext";
import ProgressBar, {
  ProgressBarTextAlign,
  ProgressBarTextPosition,
} from "../../ProgressBar/ProgressBar";
import CardHeader from "../CardHeader";
import CardFooter from "../CardFooter";
import LockOverlay from "../../LockOverlay/LockOverlay";

interface HorizontalDealCardProps {
  imageSource: ImageSourcePropType;
  variant?: "vertical" | "horizontal";
  label?: string;
  labelStyle?: StyleProp<TextStyle>;
  labelContainerStyle?: StyleProp<ViewStyle>;
  dealDescription?: string;
  dealDescriptionStyle?: StyleProp<TextStyle>;
  dealProviderName?: string;
  dealProviderNameStyle?: StyleProp<TextStyle>;
  dealPrice?: string;
  dealPriceStyle?: StyleProp<TextStyle>;
  progressBar?: boolean;
  progressBarText?: string;
  progressBarTextPosition?: ProgressBarTextPosition;
  progressBarTextAlign?: ProgressBarTextAlign;
  progressColor?: string;
  progressWidth?: number;
  progressHeight?: number;
  remainingProgressColor?: string;
  progressValue?: number;
  onPress?: () => void;
  style?: StyleProp<ViewStyle>;
  width?: number | string;
  isRTL?: boolean;
  overlayVisible?: boolean;
}

const DealCard: React.FC<HorizontalDealCardProps> = ({
  imageSource,
  onPress,
  label,
  labelContainerStyle,
  labelStyle,
  dealDescription,
  dealDescriptionStyle,
  dealPrice,
  dealPriceStyle,
  dealProviderName,
  dealProviderNameStyle,
  progressBar,
  progressBarText,
  progressBarTextPosition,
  progressBarTextAlign,
  progressValue,
  progressHeight,
  progressWidth,
  remainingProgressColor,
  progressColor,
  style,
  width,
  variant = "horizontal",
  isRTL = false,
  overlayVisible = false,
}) => {
  const {theme, isRTL: rtl} = useTheme();
  isRTL = rtl;
  const { width: screenWidth } = useWindowDimensions();
  const isVertical = variant === "vertical";

  const imageSize = Math.min(110, 110);
  const cardPadding = 12
  const fontSize = screenWidth < 360 ? 14 : 16;

  const calculatedProgressWidth =
    progressWidth ||
    (typeof width === "number" ? width * 0.4 : screenWidth * 0.3);

  const containerFlexDirection = isVertical
    ? "column"
    : isRTL
    ? "row-reverse"
    : "row";

  const textContainerStyle: ViewStyle = {
    flex: isVertical ? 0 : 1,
    ...(isVertical
      ? { paddingLeft: cardPadding, paddingRight: cardPadding }
      : isRTL
      ? { paddingLeft: cardPadding }
      : { paddingRight: cardPadding }),
  };

  const renderDealPrice = (): React.ReactNode => {
    return (
      <Text
        style={[
          {
            textAlign: "right",
            fontSize: fontSize,
            fontWeight: "bold",
            marginBottom: 3,
            color: theme.text,
          },
          isRTL && { textAlign: "left" },
          dealPriceStyle,
        ]}
      >
        {dealPrice}
      </Text>
    );
  };

  return (
    <Card
      onPress={onPress}
      variant="filled"
      backgroundColor={theme.surface}
      style={[
        {
          borderRadius: 16,
          overflow: "hidden",
          alignItems: isVertical ? "stretch" : "center",
          flexDirection: containerFlexDirection,
        },
        typeof width === "number" && { width },
        style,
      ]}
    >
      <View
        style={
          isVertical
            ? {
                position: "relative",
                marginHorizontal: cardPadding,
                marginVertical: cardPadding,
                borderRadius: 10,
                overflow: "hidden",
              }
            : {
                position: "relative",
                marginLeft: cardPadding,
                marginRight: cardPadding,
                borderRadius: 10,
                overflow: "hidden",
              }
        }
      >
        <Image
          source={imageSource}
          style={
            isVertical
              ? {
                  height: 200,
                  width: "100%",
                  borderRadius: 10,
                  alignSelf: "center",
                  resizeMode: "cover",
                }
              : {
                  width: imageSize,
                  height: imageSize,
                  borderRadius: 10,
                  alignSelf: "center",
                  resizeMode: "cover",
                }
          }
        />
        <LockOverlay onPress={onPress} visible={overlayVisible} />
      </View>

      <View style={textContainerStyle}>
        <CardHeader
          title={dealProviderName}
          subtitle={dealDescription}
          subtitleStyle={[
            isRTL && { textAlign: "right" },
            dealDescriptionStyle,
          ]}
          titleStyle={[isRTL && { textAlign: "right" }, dealProviderNameStyle]}
          style={{ paddingLeft: 0, paddingRight: 0 }}
        />
        <View style={{ marginTop: 10, marginBottom: 15 }}>
          {renderDealPrice()}
          <CardFooter
            justifyContent="space-between"
            style={[{ padding: 0 }, isRTL && { flexDirection: "row-reverse" }]}
          >
            {label && (
              <View
                style={[
                  {
                    backgroundColor: theme.primary,
                    paddingVertical: 5,
                    paddingHorizontal: 8,
                    borderRadius: 10,
                  },
                  labelContainerStyle,
                ]}
              >
                <Text
                  style={[
                    {
                      color: theme.onPrimary,
                      fontSize: 14,
                    },
                    labelStyle,
                  ]}
                >
                  {label}
                </Text>
              </View>
            )}
            <View>
              {progressBar && (
                <ProgressBar
                  progress={progressValue}
                  remainingColor={remainingProgressColor}
                  progressColor={progressColor}
                  height={progressHeight || (screenWidth < 360 ? 10 : 14)}
                  width={calculatedProgressWidth}
                  textPosition={progressBarTextPosition}
                  text={progressBarText}
                  showText={progressBarText != null}
                  textAlign={
                    isRTL && progressBarTextAlign == null
                      ? "right"
                      : progressBarTextAlign
                  }
                  isRTL={isRTL}
                  textStyle={{
                    fontSize: screenWidth < 360 ? 8 : 10,
                    color: theme.text,
                  }}
                />
              )}
            </View>
          </CardFooter>
        </View>
      </View>
    </Card>
  );
};

export default DealCard;