import {
  View,
  Text,
  TouchableOpacity,
  ActivityIndicator,
  SafeAreaView,
  Linking,
  ScrollView,
  Image,
  Modal,
} from "react-native";
import React, { useContext, useEffect, useState } from "react";
import { styles } from "./GetStarted.styles";
import { ICriteria, Props } from "./GetStarted.types";
import { QuestContext } from "../../context/QuestContext";
import general from "../../common/General/General";
import CrossIcon from "../../assets/ReactSVG/CrossIcon";
import DownArrow from "../../assets/ReactSVG/DownArrow";
import OnlyRightIcon from "../../assets/ReactSVG/OnlyRightIcon";
import QuestIcon from "../../assets/ReactSVG/QuestIcon";
import { AllEvents } from "../../common/enum";
import CustomText from "../../common/CustomText";
import { LinearGradient } from "expo-linear-gradient";

const GetStartedScreen = ({
  questId,
  questUserId: userId,
  userToken: token,
  showDetailed,
  onClose = () => {},
  isModal,
  actions,
  loading,
  // sessionId: session,
  title,
  description,
  isOffline,
  campaignVariationId,
  onClick = () => {},
  onError = () => {},
  styleConfig,
  showFooter,
  showProgressBar,
}: Props) => {
  const { apiKey, entityId } = useContext(QuestContext);
  const [criterias, setCriterias] = useState<ICriteria[]>([]);
  const [currentIndex, setCurrentIndex] = useState(-1);
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    setCriterias(actions);
    let totalCompleted = actions.filter((action) => action.completed).length;
    setProgress(Math.floor((totalCompleted / actions.length) * 100));
  }, [actions]);

  const handleTryOutClick = async (item: ICriteria, index?: number) => {
    if (item.completed) {
      return;
    }
    if (typeof index !== "undefined" && showDetailed == true) {
      if (index === currentIndex) {
        setCurrentIndex(-1);
      } else {
        setCurrentIndex(index);
      }

      return;
    }

    if (await Linking.canOpenURL(item.postlink)) {
      Linking.openURL(item.postlink);

      onClick(item.actionId);
      if (!isOffline) {
        verifyCriteria(item.actionId);
      } else {
        const updatedCriterias = criterias.map((criteria) => {
          if (criteria.actionId === item.actionId) {
            criteria.completed = true;
          }

          return criteria;
        });

        const completedCriterias = updatedCriterias.filter(
          (action) => action.completed
        ).length;

        const completedCriteriasPercentage = Math.floor(
          (completedCriterias / criterias.length) * 100
        );

        setCriterias([...updatedCriterias]);
        setProgress(completedCriteriasPercentage);
        setCurrentIndex(-1);
      }
    } else {
      if (onError) {
        onError(AllEvents.INVAILD_LINK, "Please provied vaild link");
      }
    }
  };
  const handleVisitWebClick = async (item: ICriteria) => {
    if (item.completed) {
      return;
    }

    if (item?.demoLink && (await Linking.canOpenURL(item.demoLink))) {
      Linking.openURL(item.demoLink);
    } else {
      if (onError) {
        onError(AllEvents.INVAILD_LINK, "Please provied vaild link");
      }
    }
  };

  const verifyCriteria = async (actionId: string) => {
    try {
      const response = await general.makeRequest({
        url: `/v2/entities/${entityId}/campaigns/${questId}/verify`,
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          userId,
          token,
          apiKey,
        },
        body: {
          actions: actions.filter((action) => action.actionId === actionId),
          campaignVariationId,
        },
      });

      if (!response.success) {
        if (onError) {
          onError(AllEvents.VERIFY_ACTION, response.error, response);
        }
      }

      let allCriteriasCompleted = true;

      const updatedCriterias = criterias.map((criteria) => {
        if (criteria.actionId === actionId) {
          criteria.completed = true;
        }
        if (!criteria.completed) {
          allCriteriasCompleted = false;
        }
        return criteria;
      });

      const completedCriterias = actions.filter(
        (action) => action.completed
      ).length;

      const completedCriteriasPercentage = Math.floor(
        (completedCriterias / criterias.length) * 100
      );

      setCriterias([...updatedCriterias]);
      setProgress(completedCriteriasPercentage);
      setCurrentIndex(-1);
      if (allCriteriasCompleted) {
        claimQuest();
      }
    } catch (error: any) {
      if (onError) {
        onError(AllEvents.VERIFY_ACTION, error.message);
      }
    }
  };

  const claimQuest = async () => {
    try {
      const response = await general.makeRequest({
        url: `/entities/${entityId}/campaigns/${questId}/claim`,
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          userId,
          token,
          apiKey,
        },
        body: { campaignVariationId },
      });

      if (!response.success) {
        if (onError) {
          onError(AllEvents.CLAIM_ACTION, response.error, response);
        }
      }
    } catch (error: any) {
      if (onError) {
        onError(AllEvents.CLAIM_ACTION, error.message);
      }
    }
  };

  const renderCriteria = (item: ICriteria, index: number) => {
    return (
      <View
        style={[
          styles.cardView,
          { borderBottomWidth: showDetailed === true ? 1 : 1 },
          { borderWidth: showDetailed === false ? 1 : 0 },
          { borderRadius: showDetailed === false ? 10 : 0 },
          { ...styleConfig?.Card },
        ]}
        key={item.actionId}
      >
        <View style={{ flexDirection: "row", alignItems: "center" }}>
          <View style={[styles.imageView, { ...styleConfig?.Icon }]}>
            <Image style={[styles.image]} source={{ uri: item.imageUrl }} />
          </View>

          <TouchableOpacity
            style={{ flex: 1 }}
            onPress={() => handleTryOutClick(item, index)}
          >
            <CustomText fontStyle="semibold" style={[styles.cardHeaderText]}>
              {item.title}
            </CustomText>
            <CustomText style={[styles.cardDesciptionText]}>
              {item.description}
            </CustomText>
          </TouchableOpacity>
          <View style={{ marginLeft: 12 }}>
            {!item.completed ? (
              <>
                <View
                  style={[
                    styles.arrowIconView,
                    {
                      transform: !showDetailed
                        ? [{ rotate: "270deg" }]
                        : currentIndex === index
                        ? [{ rotate: "180deg" }]
                        : [{ rotate: "0deg" }],
                    },
                    {
                      backgroundColor:
                        styleConfig?.Arrow?.Background || "#FBFBFB",
                    },
                  ]}
                >
                  <DownArrow
                    fill={styleConfig?.Arrow?.IconColor || "#939393"}
                  />
                </View>
              </>
            ) : (
              <View
                style={[
                  styles.rightIconView,
                  {
                    backgroundColor:
                      styleConfig?.Arrow?.CompletedBackground || "#EBFFF7",
                  },
                ]}
              >
                <OnlyRightIcon
                  fill={styleConfig?.Arrow?.CompletedIconColor || "#098849"}
                />
              </View>
            )}
          </View>
        </View>

        {showDetailed && currentIndex === index && (
          <>
            <View>
              <CustomText
                style={{
                  fontSize: 12,
                  fontWeight: "400",
                  lineHeight: 16,
                  color: "#939393",
                }}
              >
                Be sure to check out the Quest labs community for support, plus
                tips & tricks from Quest users
              </CustomText>
            </View>

            <View style={styles.LastView}>
              <View style={[styles.ArrowButtonView]}>
                <TouchableOpacity
                  onPress={() => handleTryOutClick(item)}
                  disabled={item.completed}
                >
                  <LinearGradient
                    colors={["#9035FF", "#0065FF"]}
                    start={{ x: 0.1, y: 0 }}
                    end={{ x: 1, y: 1 }}
                    locations={[0.0036, 1]}
                    style={[
                      styles.startNowButtonView,

                      { ...styleConfig?.PrimaryButton },
                    ]}
                  >
                    <CustomText
                    fontStyle="semibold"
                      style={[
                        styles.startNowButton,

                        { ...styleConfig?.PrimaryButton },
                      ]}
                    >
                      {item.buttonText}
                    </CustomText>
                  </LinearGradient>
                </TouchableOpacity>

                <TouchableOpacity
                  style={[
                    styles.visitWebButtonView,

                    { ...styleConfig?.SecondaryButton },
                  ]}
                  onPress={() => handleVisitWebClick(item)}
                  disabled={item.completed}
                >
                  <CustomText
                  fontStyle="semibold"
                    style={[
                      styles.visitWebButton,

                      { ...styleConfig?.SecondaryButton },
                    ]}
                  >
                    {item.demoButtonText}
                  </CustomText>
                </TouchableOpacity>
              </View>
            </View>
          </>
        )}
      </View>
    );
  };

  if (loading) {
    return (
      <SafeAreaView style={styles.loadingMainView}>
        <ActivityIndicator size="large" color="#545454" />
        <CustomText>Loading...</CustomText>
      </SafeAreaView>
    );
  }

  const RenderContent = () => (
    <View style={[styles.mainView, { ...styleConfig?.Form }]}>
      <View style={[styles.headerView, { ...styleConfig?.TopBar }]}>
        <View style={styles.getStartedView}>
          <View style={{ flex: 1 }}>
            <CustomText
fontStyle="semibold"
              style={[styles.headerText, { ...styleConfig?.Heading }]}
            >
              {title}
            </CustomText>
            <CustomText
              style={[styles.descriptionText, { ...styleConfig?.Description }]}
            >
              {description}
            </CustomText>
          </View>
          <TouchableOpacity onPress={onClose}>
            <CrossIcon size={16} color="#939393" />
          </TouchableOpacity>
        </View>
      </View>
      {/* Progress bar */}
      {showProgressBar && (
        <View
          style={{ paddingTop: 20, paddingHorizontal: 20, paddingBottom: 16 }}
        >
          <CustomText
          fontStyle="semibold"
            style={[
              styles.progressBarTextStyle,
              { color: styleConfig?.ProgressBar?.ProgressText || "#9035FF" },
            ]}
          >
            {progress}% Completed
          </CustomText>
          <View
            style={[
              styles.progressBar,

              {
                backgroundColor:
                  styleConfig?.ProgressBar?.barParentColor || "#EFEFEF",
              },
            ]}
          >
            <View
              style={[
                styles.progressBarInnerStyle,
                { width: `${progress}%` },

                {
                  backgroundColor:
                    styleConfig?.ProgressBar?.barColor || "#9035FF",
                },
              ]}
            />
          </View>
        </View>
      )}

      <ScrollView>
        <View
          style={[styles.mainInnerCardView, { ...styleConfig?.CardContainer }]}
        >
          {criterias.map(renderCriteria)}
        </View>
      </ScrollView>
      {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>
  );

  if (isModal) {
    return (
      <Modal animationType="slide" transparent={true} visible={true}>
        <View
          style={{
            flex: 1,
            justifyContent: "center",
            alignItems: "center",
            marginHorizontal: 10,
          }}
        >
          <RenderContent />
        </View>
      </Modal>
    );
  } else {
    return <RenderContent />;
  }
};
export default GetStartedScreen;