import {
  View,
  Text,
  Linking,
  TouchableOpacity,
  SafeAreaView,
  ScrollView,
  Dimensions,
} from "react-native";
import React, { useContext, useEffect, useState } from "react";
import { ICriteria, Props } from "./QuestList.type";
import { styles } from "./QuestList.style";
import { QuestContext } from "../../context/QuestContext";
import general from "../../common/General/General";
import { ActivityIndicator } from "react-native";
import TimeIcon from "../../assets/ReactSVG/TimeIcon";
import QuestIcon from "../../assets/ReactSVG/QuestIcon";
import CrossIcon from "../../assets/ReactSVG/CrossIcon";
import Line from "../../assets/ReactSVG/Line";
import { Modal } from "react-native";
import OnlyRightIcon from "../../assets/ReactSVG/OnlyRightIcon";
import { AllEvents } from "../../common/enum";
import CustomText from "../../common/CustomText";

const windowHeight = Dimensions.get("window").height;
const QuestList = ({
  campaignVariationId,
  questId,
  questUserId: userId,
  userToken: token,
  onClose = () => {},
  isModal,
  actions,
  loading,
  title,
  description,
  isOffline,
  styleConfig,
  onClick = () => {},
  onError = () => {},
  showFooter = true,
}: Props) => {
  const { apiKey, entityId } = useContext(QuestContext);
  const [criterias, setCriterias] = useState<ICriteria[]>([]);

  useEffect(() => {
    setCriterias(actions);
  }, [actions]);

  const handleTryOutClick = async (item: ICriteria) => {
    if (item.completed) {
      return;
    }

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

          return criteria;
        });
        setCriterias([...updatedCriterias]);
      }
    } else {
      if (onError) {
        onError(AllEvents.INVAILD_LINK, "Please Provied the 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) {
        let allCriteriasCompleted = true;

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

        setCriterias([...updatedCriterias]);
        if (allCriteriasCompleted) {
          claimQuest();
        }
      } else {
        if (onError) {
          onError(AllEvents.VERIFY_ACTION, response.error, response);
        }
      }
    } catch (error: any) {
      if (onError) {
        onError(AllEvents.VERIFY_ACTION, error.message);
      }
    }
  };

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

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

  if (loading) {
    return (
      <SafeAreaView style={styles.loadingMainView}>
        <ActivityIndicator size="large" color="#545454" />
        <CustomText>Loading...</CustomText>
      </SafeAreaView>
    );
  }
  const renderCriteria = (item: ICriteria, index: number) => {
    const isLastItem = index === criterias.length - 1;
    const currentCompleted = item.completed;
    const nextCompleted = !isLastItem && criterias[index + 1].completed;
    return (
      <View
        key={item.actionId}
        style={{ paddingHorizontal: 20, paddingTop: 20 }}
      >
        <TouchableOpacity
          onPress={() => handleTryOutClick(item)}
          style={{
            flexDirection: "row",
            alignItems: "center",
            position: "relative",
          }}
        >
          <View style={[styles.questListView]}>
            {item.completed ? (
              <View style={[styles.rightIconBackgroundView]}>
                <OnlyRightIcon />
              </View>
            ) : (
              <View style={[styles.iconBackgroundView]}>
                <TimeIcon />
              </View>
            )}
          </View>
          {!isLastItem && (
            <View style={[styles.lineView]}>
              <Line color={(currentCompleted && nextCompleted) ? "#73DCA7" : "#EFEFEF"}/>
            </View>
          )}
          <View style={styles.modleViewStyle}>
            <CustomText
            fontStyle="semibold"
              style={[styles.stepTextStyle, { ...styleConfig?.Card?.stepText }]}
            >
              STEP {index + 1}
            </CustomText>
            <CustomText
            fontStyle="semibold"
              style={[
                styles.modleTitleTextStyle,

                { ...styleConfig?.Card?.title },
              ]}
            >
              {item.title}
            </CustomText>

            <CustomText
              style={[
                styles.modleDescriptionTextStyle,

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

  const RenderContent = () => (
    <View style={[styles.mainViewStyle, { ...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}
          style={{ backgroundColor: "#FBFBFB", padding: 4, borderRadius: 4 }}
        >
          <CrossIcon size={16} color="#939393" />
        </TouchableOpacity>
        {/* </View> */}
      </View>

      <ScrollView style={{ marginBottom: 20, maxHeight: windowHeight * 0.7 }}>
        {criterias.map(renderCriteria)}
      </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 QuestList;