import { useTheme, ThemeType } from "../../theme";
import React, { FC, ReactNode, useEffect, useMemo, useRef, useState } from "react";
import {
  Modal,
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  ImageBackground,
  ImageSourcePropType,
  Dimensions,
  TouchableWithoutFeedback,
  Platform,
  StatusBar,
  TextStyle,
  ViewStyle,
  Animated,
  Easing,
} from "react-native";
import { Image, ImageStyle} from 'expo-image';
import CloseIcon from "../CloseIcon/CloseIcon";
import Toast from "react-native-toast-message";

interface PopupProps {
  visible: boolean;
  onClose: () => void;
  backgroundImage?: ImageSourcePropType;
  title?: string;
  content?: string;
  subtitle?: string;
  children?: ReactNode;
  primaryButtonText?: string;
  onPrimaryButtonPress?: () => void;
  secondaryButtonText?: string;
  onSecondaryButtonPress?: () => void;
  closeOnBackdropPress?: boolean;
  showCloseIcon?: boolean;
  closeIconVariant?: "floating" | "nested";
  customCloseIcon?: ReactNode;
  closeIconContainerStyle?: ViewStyle;
  closeIconStyle?: TextStyle;
  closeIconColor?: string;
  illustrationImage?: ImageSourcePropType;
  illustrationStyle?: ImageStyle;
  containerStyle?: ViewStyle;
  contentContainerStyle?: ViewStyle;
  titleStyle?: TextStyle;
  subtitleStyle?: TextStyle;
  contentStyle?: TextStyle;
  primaryButtonStyle?: ViewStyle;
  primaryButtonTextStyle?: TextStyle;
  secondaryButtonStyle?: ViewStyle;
  secondaryButtonTextStyle?: TextStyle;
  isRTL?: boolean;
  closeIconSize?: number;
  modalStyle?: ViewStyle;
  overlay?: ReactNode;
  customContent?: ReactNode;
}
const { height: screenHeight } = Dimensions.get("window");

const Popup: FC<PopupProps> = ({
  visible,
  onClose,
  backgroundImage,
  title,
  content,
  subtitle,
  children,
  primaryButtonText,
  onPrimaryButtonPress,
  secondaryButtonText,
  onSecondaryButtonPress,
  closeOnBackdropPress = true,
  showCloseIcon = false,
  customCloseIcon,
  illustrationImage,
  illustrationStyle,
  containerStyle,
  titleStyle,
  contentStyle,
  primaryButtonStyle,
  primaryButtonTextStyle,
  secondaryButtonStyle,
  secondaryButtonTextStyle,
  contentContainerStyle,
  closeIconContainerStyle,
  closeIconStyle,
  closeIconVariant = "floating",
  subtitleStyle,
  isRTL: propIsRTL,
  closeIconColor,
  closeIconSize = 28,
  modalStyle,
  overlay,
  customContent,
}) => {
  const { theme, isRTL: themeIsRTL } = useTheme();
  const isRTL = propIsRTL !== undefined ? propIsRTL : themeIsRTL;
  const styles = useMemo(() => createStyles(theme), [theme]);

  const [modalRendered, setModalRendered] = useState(visible);
  const slideAnim = useRef(new Animated.Value(screenHeight)).current;

  useEffect(() => {
    if (visible) {
      setModalRendered(true);
      Animated.timing(slideAnim, {
        toValue: 0,
        duration: 300,
        easing: Easing.out(Easing.ease),
        useNativeDriver: true,
      }).start();
    } else {
      Animated.timing(slideAnim, {
        toValue: screenHeight,
        duration: 300,
        easing: Easing.in(Easing.ease),
        useNativeDriver: true,
      }).start(() => {
        setModalRendered(false);
      });
    }
  }, [visible, slideAnim]);

  const renderDefaultContent = () => (
    <View style={[styles.contentContainer, contentContainerStyle]}>
      {illustrationImage && (
        <View style={styles.illustrationContainer}>
          <Image
            source={illustrationImage}
            style={[styles.illustrationImage, illustrationStyle]}
            contentFit="contain"
          />
        </View>
      )}
      {title && (
        <Text
          style={[
            styles.title,
            { color: theme.text, textAlign: "center" },
            titleStyle,
          ]}
        >
          {title}
        </Text>
      )}
      {subtitle && (
        <Text
          style={[
            styles.subtitle,
            { color: theme.text, textAlign: "center" },
            subtitleStyle,
          ]}
        >
          {subtitle}
        </Text>
      )}
      {content && (
        <Text
          style={[
            styles.content,
            { color: theme.text, textAlign: "center" },
            contentStyle,
          ]}
        >
          {content}
        </Text>
      )}
      {customContent && <View>{customContent}</View>}
      {(secondaryButtonText || primaryButtonText) && (
        <View
          style={[
            styles.buttonContainer,
            { flexDirection: isRTL ? "row-reverse" : "row" },
          ]}
        >
          {secondaryButtonText && (
            <TouchableOpacity
              style={[
                styles.secondaryButton,
                { borderColor: theme.primary },
                secondaryButtonStyle,
                isRTL
                  ? { marginLeft: 12, marginRight: 0 }
                  : { marginRight: 12, marginLeft: 0 },
              ]}
              onPress={onSecondaryButtonPress}
            >
              <Text
                style={[
                  styles.secondaryButtonText,
                  { color: theme.primary },
                  secondaryButtonTextStyle,
                ]}
              >
                {secondaryButtonText}
              </Text>
            </TouchableOpacity>
          )}
          {primaryButtonText && (
            <TouchableOpacity
              style={[
                styles.primaryButton,
                { backgroundColor: theme.primary },
                primaryButtonStyle,
              ]}
              onPress={onPrimaryButtonPress}
            >
              <Text
                style={[
                  styles.primaryButtonText,
                  { color: theme.onPrimary },
                  primaryButtonTextStyle,
                ]}
              >
                {primaryButtonText}
              </Text>
            </TouchableOpacity>
          )}
        </View>
      )}
    </View>
  );

  if (!modalRendered && !visible) {
    return null;
  }

  return (
    <Modal
      transparent
      visible={modalRendered}
      animationType="none"
      onRequestClose={onClose}
      statusBarTranslucent
      style={modalStyle}
    >
      <View style={styles.modalOverlay}>
        {closeOnBackdropPress && (
          <TouchableWithoutFeedback onPress={onClose}>
            <View style={StyleSheet.absoluteFill} />
          </TouchableWithoutFeedback>
        )}
        <Animated.View
          style={[
            { transform: [{ translateY: slideAnim }] },
            styles.animatedContainer,
          ]}
          pointerEvents="box-none"
        >
          {/* <TouchableWithoutFeedback> */}
          <View style={[!children && styles.popupContainer, containerStyle]}>
            <CloseIcon
              show={showCloseIcon}
              onPress={onClose}
              customIcon={customCloseIcon}
              variant={closeIconVariant}
              containerStyle={closeIconContainerStyle}
              iconStyle={closeIconStyle}
              color={closeIconColor}
              size={closeIconSize}
              isRTL={isRTL}
            />
            {overlay && (
              <View style={styles.overlayContainer} pointerEvents="none">
                {overlay}
              </View>
            )}

            {children ? (
              children
            ) : backgroundImage ? (
              <ImageBackground
                source={backgroundImage}
                style={styles.backgroundImage}
                imageStyle={styles.backgroundImageStyle}
              >
                {renderDefaultContent()}
              </ImageBackground>
            ) : (
              renderDefaultContent()
            )}
          </View>
          {/* </TouchableWithoutFeedback> */}
        </Animated.View>
      </View>
      <Toast />
    </Modal>
  );
};

const { width } = Dimensions.get("window");
const popupWidth = width * 0.85;

// Function to create themed styles
const createStyles = (theme: ThemeType) =>
  StyleSheet.create({
    modalOverlay: {
      flex: 1,
      backgroundColor: "rgba(0, 0, 0, 0.5)", // Keep overlay color
      justifyContent: "center",
      alignItems: "center",
      paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
    },
    animatedContainer: {
      alignItems: "center",
      width: "100%",
      justifyContent: "center",
      flexGrow: 1,
    },
    popupContainer: {
      width: popupWidth,
      maxHeight: "80%",
      borderRadius: 16,
      elevation: 5,
      shadowColor: "#000",
      shadowOffset: { width: 0, height: 2 },
      shadowOpacity: 0.25,
      shadowRadius: 3.84,
      position: "relative",
      backgroundColor: theme.surface,
    },
    closeIconContainer: {
      position: "absolute",
      zIndex: 10,
      width: 32,
      height: 32,
      justifyContent: "center",
      alignItems: "center",
      borderWidth: 1,
      borderRadius: 16,
      padding: 0,
      // backgroundColor and borderColor set inline
    },
    closeIcon: {
      width: 24,
      height: 24,
      resizeMode: "contain",
      textAlign: "center",
      textAlignVertical: "center",
      lineHeight: 24,
      // color is set inline
    },
    backgroundImage: {
      width: "100%",
      height: "100%",
    },
    backgroundImageStyle: {
      borderRadius: 16,
    },
    contentContainer: {
      padding: 24,
      alignItems: "center",
      justifyContent: "center",
      // flex: 1,
      // alignSelf:"stretch",
      borderRadius: 16,
    },
    illustrationContainer: {
      marginBottom: 16,
      alignItems: "center",
      justifyContent: "center",
    },
    illustrationImage: {
      width: 150,
      height: 150,
      marginBottom: 8,
    },
    title: {
      fontSize: 20,
      fontWeight: "bold",
      marginBottom: 12,
      width: "100%",
      // color is set inline
    },
    subtitle: {
      fontSize: 20, // Adjusted size for subtitle
      fontWeight: "bold", // Adjusted weight for subtitle
      marginBottom: 12,
      width: "100%",
    },
    content: {
      fontSize: 16,
      marginBottom: 24,
      lineHeight: 22,
      width: "100%",
      // color is set inline
    },
    buttonContainer: {
      justifyContent: "center",
      marginTop: 16,
      width: "100%",
    },
    primaryButton: {
      paddingVertical: 12,
      paddingHorizontal: 32,
      borderRadius: 50,
      minWidth: 120,
      alignItems: "center",
      // backgroundColor is set inline
    },
    primaryButtonText: {
      fontWeight: "600",
      fontSize: 16,
      // color is set inline using theme.onPrimary
    },
    secondaryButton: {
      paddingVertical: 12,
      paddingHorizontal: 24,
      borderRadius: 50,
      borderWidth: 1,
      minWidth: 120,
      alignItems: "center",
      // borderColor is set inline
    },
    secondaryButtonText: {
      fontWeight: "600",
      fontSize: 16,
      // color is set inline
    },
    overlayContainer: {
      ...StyleSheet.absoluteFill,
      zIndex: 5,
      justifyContent: "center",
      alignItems: "center",
    },
  });

export default Popup;