import React from "react";
import {
  View,
  TouchableOpacity,
  StyleSheet,
  Platform,
} from "react-native";
import { CardProps } from "./types";
import { useTheme } from "../../theme/ThemeContext";
import { LinearGradient } from "expo-linear-gradient";
import { Grayscale } from "react-native-color-matrix-image-filters";
import { ImageBackground } from "expo-image";
import { Pressable } from "react-native-gesture-handler";

const Card: React.FC<CardProps> = ({
  children,
  style,
  onPress,
  disabled = false,
  elevation = 1,
  testID,
  variant,
  backgroundColor,
  borderColor,
  borderRadius = 8,
  backgroundImage,
  gradient,
  greyscale = false,
  gestureHandler
}) => {
  const { theme } = useTheme();

  const getCardStyle = () => {
    const baseStyle: any = {
      backgroundColor: backgroundColor || theme.background,
      borderRadius,
    };

    return baseStyle;
  };

  const cardStyle = [
    styles.card,
    getCardStyle(),
    disabled && { opacity: 0.6 },
    style,
    backgroundImage && { backgroundColor: "transparent" },
  ];

  const RenderCardContent = () => {
    if (backgroundImage) {
      const img = (
        <ImageBackground
          source={backgroundImage.source}
          style={[styles.backgroundImage, backgroundImage.style]}
          imageStyle={[{ borderRadius }, backgroundImage.imageStyle]}
          contentFit={backgroundImage.resizeMode || "cover"}
          blurRadius={backgroundImage.blurRadius}
          recyclingKey={backgroundImage.id}
        >
          <View
            style={[
              styles.imageContentContainer,
              {
                opacity:
                  backgroundImage.opacity !== undefined
                    ? backgroundImage.opacity
                    : 1,
              },
            ]}
          >
            {children}
          </View>
        </ImageBackground>
      );
      if (!greyscale) return img;
      return <Grayscale>{img}</Grayscale>;
    } else if (gradient) {
      return (
        <LinearGradient
          colors={gradient.colors as any}
          start={gradient.start}
          end={gradient.end}
          style={[styles.gradient, { borderRadius }, gradient.style]}
        >
          {children}
        </LinearGradient>
      );
    } else {
      return children;
    }
  };

  if (onPress) {
    if (gestureHandler) {
      return (
        <Pressable
          style={({ pressed }) => [
            cardStyle,
            pressed && { opacity: 0.9 },
          ]}
          onPress={onPress}
          disabled={disabled}
          testID={testID}
          accessibilityRole="button"
          accessibilityLabel={"Card"}
        >
          {RenderCardContent()}
        </Pressable>
      );
    }

    return (
      <TouchableOpacity
        style={cardStyle}
        onPress={onPress}
        disabled={disabled}
        testID={testID}
        activeOpacity={0.9}
        accessibilityRole="button"
        accessibilityLabel={"Card"}
      >
        {RenderCardContent()}
      </TouchableOpacity>
    );
  }

  return (
    <View style={cardStyle} testID={testID}>
      {RenderCardContent()}
    </View>
  );
};

const styles = StyleSheet.create({
  card: {
    borderRadius: 8,
    flexDirection: "column",
    display: "flex",
  },
  backgroundImage: {
    width: "100%",
    height: "100%",
  },
  imageContentContainer: {
    flex: 1,
    backgroundColor: "transparent",
  },
  gradient: {
    flex: 1,
    width: "100%",
    height: "100%",
    justifyContent: "flex-start",
    alignItems: "flex-start",
  },
});

export default Card;