import {
  View,
  Text,
  TouchableOpacity,
  TextInput,
  ScrollView,
  Modal,
} from "react-native";
import React, { useEffect, useState, useMemo } from "react";
import { styles } from "./CrossSelling.styles";
import { Props } from "./CrossSelling.types";
import EmailIcon from "../../assets/ReactSVG/EmailIcon";
import SpacialOfferIconBox from "../../assets/ReactSVG/SpacialOfferIconBox";
import QuestIcon from "../../assets/ReactSVG/QuestIcon";
import { LinearGradient } from "expo-linear-gradient";
import CustomText from "../../common/CustomText";
import CrossIcon from "../../assets/ReactSVG/CrossIcon";
import Success from "../../assets/ReactSVG/Success";

const CrossSelling = ({
  expiryDate,
  claimRewardHandler,
  onClose,
  description,
  heading,
  isEmail,
  primaryDescription,
  primaryHeading,
  shareButtonText,
  showFooter,
  styleConfig,
}: Props) => {
  const endDate = useMemo(() => {
    return expiryDate ? new Date(expiryDate) : new Date();
  }, [expiryDate]);
  const [success, setSuccess] = useState(false);
  const [email, setEmail] = useState("");
  const [remainingTime, setRemainingTime] = useState({
    days: 0,
    hours: 0,
    minutes: 0,
    seconds: 0,
  });

  useEffect(() => {
    const updateRemainingTime = () => {
      const now = new Date();
      const differenceInMillis = endDate.getTime() - now.getTime();

      if (differenceInMillis <= 0) {
        setRemainingTime({ days: 0, hours: 0, minutes: 0, seconds: 0 });
        return;
      }

      const daysRemaining = Math.floor(
        differenceInMillis / (1000 * 60 * 60 * 24)
      );
      const hoursRemaining = Math.floor(
        (differenceInMillis % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
      );
      const minutesRemaining = Math.floor(
        (differenceInMillis % (1000 * 60 * 60)) / (1000 * 60)
      );
      const secondsRemaining = Math.floor(
        (differenceInMillis % (1000 * 60)) / 1000
      );

      setRemainingTime({
        days: daysRemaining,
        hours: hoursRemaining,
        minutes: minutesRemaining,
        seconds: secondsRemaining,
      });
    };

    updateRemainingTime(); // Update immediately
    const interval = setInterval(updateRemainingTime, 1000); // Update every second

    return () => clearInterval(interval);
  }, [endDate]);

  const formatTime = (time: number): string => {
    return time.toString().padStart(2, "0");
  };

  const claimRewardHandlerButton = () => {
    if (claimRewardHandler) {
      claimRewardHandler(email);
      setSuccess(true);
      setEmail("");
    }
  };
  const handleSuccessClose = () => {
    setSuccess(false);
  }

  const onCloseButton = () => {
    if (onClose) {
      onClose();
    }
  };

  return (
    <>
    <View style={styles.MainContainer}>
      <LinearGradient
        colors={["rgba(255, 255, 255, 0)", "#9035FF", "#0065FF"]}
        start={{ x: 0, y: 1 }}
        end={{ x: 0.6, y: 0 }}
        locations={[0.3824, 0.5939, 0.707]}
        style={[styles.mainViewStyle, { ...styleConfig?.Form }]}
      >
        {/* Top Header */}
        <View style={[styles.headerViewStyle]}>
          <CustomText fontStyle="semibold" style={[styles.headerTextStyle]}>
            {primaryHeading ? primaryHeading : "Grab your deal"}
          </CustomText>
          <CustomText style={[styles.descriptionTextStyle]}>
            {primaryDescription
              ? primaryDescription
              : " Welcome back, Please check the surprise"}
          </CustomText>
        </View>
        <View style={{ flex: 1, justifyContent: "flex-end" }}>
          {/* Middle view */}
          <View style={[styles.middelView, { ...styleConfig?.Form }]}>
            <ScrollView>
              <View style={styles.imageViewStyle}>
                <SpacialOfferIconBox size={80} />
              </View>

              <View style={{ paddingHorizontal: 20 }}>
                <CustomText
                fontStyle="semibold"
                  style={[
                    styles.discountTextStyle,
                    { ...styleConfig?.Heading },
                  ]}
                >
                  {heading ? heading : null}
                </CustomText>
                <CustomText
                  style={[
                    styles.discountDescriptionTextStyle,
                    { ...styleConfig?.Description },
                  ]}
                >
                  {description
                    ? description
                    : " Grab deals before they go off!!!"}
                </CustomText>
              </View>

              <View style={styles.timeMainViewStyle}>
                <View
                  style={[
                    styles.timeViewStyle,
                    { backgroundColor: styleConfig?.Timer?.backgroundColor },
                  ]}
                >
                  <CustomText
                  fontStyle="semibold"
                    style={[
                      styles.timeNumberStyle,
                      { color: styleConfig?.Timer?.primaryColor },
                    ]}
                  >
                    {formatTime(remainingTime.days)}
                  </CustomText>
                  <CustomText
                  fontStyle="semibold"
                    style={[
                      styles.timeTextStyle,
                      { color: styleConfig?.Timer?.secondaryColor },
                    ]}
                  >
                    Days
                  </CustomText>
                </View>
                <View
                  style={[
                    styles.timeViewStyle,
                    { backgroundColor: styleConfig?.Timer?.backgroundColor },
                  ]}
                >
                  <CustomText
                  fontStyle="semibold"
                    style={[
                      styles.timeNumberStyle,
                      { color: styleConfig?.Timer?.primaryColor },
                    ]}
                  >
                    {formatTime(remainingTime.hours)}
                  </CustomText>
                  <CustomText
                  fontStyle="semibold"
                    style={[
                      styles.timeTextStyle,
                      { color: styleConfig?.Timer?.secondaryColor },
                    ]}
                  >
                    Hours
                  </CustomText>
                </View>
                <View
                  style={[
                    styles.timeViewStyle,
                    { backgroundColor: styleConfig?.Timer?.backgroundColor },
                  ]}
                >
                  <CustomText
                  fontStyle="semibold"
                    style={[
                      styles.timeNumberStyle,
                      { color: styleConfig?.Timer?.primaryColor },
                    ]}
                  >
                    {formatTime(remainingTime.minutes)}
                  </CustomText>
                  <CustomText
                  fontStyle="semibold"
                    style={[
                      styles.timeTextStyle,
                      { color: styleConfig?.Timer?.secondaryColor },
                    ]}
                  >
                    Minutes
                  </CustomText>
                </View>
                <View
                  style={[
                    styles.timeViewStyle,
                    { backgroundColor: styleConfig?.Timer?.backgroundColor },
                  ]}
                >
                  <CustomText
                  fontStyle="semibold"
                    style={[
                      styles.timeNumberStyle,
                      { color: styleConfig?.Timer?.primaryColor },
                    ]}
                  >
                    {formatTime(remainingTime.seconds)}
                  </CustomText>
                  <CustomText
                  fontStyle="semibold"
                    style={[
                      styles.timeTextStyle,
                      { color: styleConfig?.Timer?.secondaryColor },
                    ]}
                  >
                    Seconds
                  </CustomText>
                </View>
              </View>

              {/* Email */}
              {isEmail && (
                <View style={{ padding: 20 }}>
                  <CustomText style={[styles.inputLabelTextStyle]}>
                    Email
                  </CustomText>
                  <View style={[styles.inputViewStyle]}>
                    <TextInput
                      inputMode="email"
                      placeholder="Enter your email id"
                      placeholderTextColor={"#8E8E8E"}
                      value={email}
                      onChangeText={(text) => setEmail(text)}
                      style={[styles.inputTextStyle]}
                    />
                    <EmailIcon />
                  </View>
                </View>
              )}

              <LinearGradient
                colors={["#9035FF", "#0065FF"]}
                start={{ x: 0.1, y: 0 }}
                end={{ x: 1, y: 1 }}
                locations={[0.0036, 1]}
                style={[
                  styles.submitViewStyle,
                  { ...styleConfig?.PrimaryButton },
                ]}
              >
                <TouchableOpacity
                  onPress={claimRewardHandlerButton}
                  style={{
                    justifyContent: "center",
                    alignItems: "center",
                    width: "100%",
                    paddingVertical: 13,
                  }}
                >
                  <CustomText fontStyle="semibold" style={[styles.submitTextStyle]}>
                    {shareButtonText ? shareButtonText : "Avail now"}
                  </CustomText>
                </TouchableOpacity>
              </LinearGradient>

              <TouchableOpacity
                style={[
                  styles.GohomeViewStyle,
                  { ...styleConfig?.SecondaryButton },
                ]}
                onPress={onCloseButton}
              >
                <CustomText fontStyle="semibold" style={[styles.GohomeTextStyle]}>
                  Go to home!
                </CustomText>
              </TouchableOpacity>
            </ScrollView>
          </View>
        </View>
      </LinearGradient>

      {showFooter && (
        <View
          style={[styles.footerView, { ...styleConfig?.Footer?.FooterStyle }]}
        >
          <View style={[styles.footerInnerView]}>
            <CustomText
              style={[
                styles.footerText,
                { ...styleConfig?.Footer?.FooterText },
              ]}
            >
              Powered by Quest Labs
            </CustomText>
            <QuestIcon color={styleConfig?.Footer?.FooterIcon?.color} />
          </View>
        </View>
      )}
    </View>


    {success && (
        <Modal
          animationType="slide"
          transparent={true}
          visible={success}
          onRequestClose={() => {
            setSuccess(!success);
          }}
        >
          <View style={[styles.modalOutterViewStyle]}>
            <View style={[styles.successModalViewStyle]}>
              <TouchableOpacity
                style={{ padding: 20, alignItems: "flex-end" }}
                onPress={handleSuccessClose}
              >
                <CrossIcon size={16} color="#939393" />
              </TouchableOpacity>
              <View style={[styles.ImageViewStyle]}>
                <Success />
              </View>
              <View style={[styles.midContainerViewStyles]}>
                <View>
                  <CustomText style={[styles.successHeaderTextStyle]}>
                    Thanks for reaching out!
                  </CustomText>
                </View>
                <View>
                  <CustomText style={[styles.successDescriptionTextStyle]}>
                    Thanks for reaching out to us. We appreciate your time and
                    our team will surely call you back on your number.
                  </CustomText>
                </View>
                <View
                  style={{ justifyContent: "center", alignItems: "center" }}
                >
                  <TouchableOpacity
                    style={[styles.submitButtonViewStyle]}
                    onPress={handleSuccessClose}
                  >
                    <CustomText style={[styles.submitButtonTextStyle]}>
                      Go to home!
                    </CustomText>
                  </TouchableOpacity>
                </View>
              </View>
                <View style={{ justifyContent: "flex-end" }}>
                  <View style={[styles.footerView]}>
                    <View style={[styles.footerInnerView]}>
                      <CustomText style={[styles.footerText]}>
                        Powered by Quest Labs
                      </CustomText>
                      <QuestIcon color="#E0E0E0" />
                    </View>
                  </View>
                </View>
            </View>
          </View>
        </Modal>
      )}
    </>

  );
};

export default CrossSelling;