import {
  View,
  Text,
  TouchableOpacity,
  ScrollView,
  ActivityIndicator,
  Modal,
  TextInput,
} from "react-native";
import React, { useContext, useEffect, useState } from "react";
import { ICriteria, Props } from "./Gamified.type";
import { styles } from "./Gamified.styles";
import GamifiedIcon from "../../assets/ReactSVG/GamifiedIcon";
import { QuestContext } from "../../context/QuestContext";
import general from "../../common/General/General";
import MultipleSelectCheckbox from "../MultiSelectCheckbox/MultipleSelectCheckbox";
import Success from "../../assets/ReactSVG/Success";
import CrossIcon from "../../assets/ReactSVG/CrossIcon";
import QuestIcon from "../../assets/ReactSVG/QuestIcon";
import OutterRadioIcon from "../../assets/ReactSVG/OutterRadioIcon";
import SelectedRadioIcon from "../../assets/ReactSVG/SelectedRadioIcon";
import { AllEvents } from "../../common/enum";
import { LinearGradient } from "expo-linear-gradient";
import CustomText from "../../common/CustomText";

export default function Gamified({
  campaignVariationId,
  questId,
  questUserId: userId,
  userToken: token,
  // style,
  actions,
  loading,
  onUpdateAction,
  header,
  onError = () => {},
  styleConfig,
}: Props) {
  const { apiKey, entityId } = useContext(QuestContext);
  const [criteria, setCriteria] = useState<ICriteria[]>(actions || []);
  const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
  const [submitLoading, setSubmitLoading] = useState(false);
  const [selectedItemIndex, setSelectedItemIndex] = useState<number | null>(
    null
  );
  const [modalVisible, setModalVisible] = useState(true);
  const [successModalVisible, setSuccessModalVisible] = useState(false);

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

  useEffect(() => {
    const currentAnswer = criteria[currentQuestionIndex]?.answer[0];
    const currentOptions = criteria[currentQuestionIndex]?.options || [];
    const selectedIndex = currentOptions.indexOf(currentAnswer);
    setSelectedItemIndex(selectedIndex !== -1 ? selectedIndex : null);
  }, [currentQuestionIndex, criteria]);

  const onNext = async () => {
    try {
      // Check if there are criteria with answers for the current question
      if (criteria[currentQuestionIndex].answer.length > 0) {
        // Move to the next question if it's not the last question
        if (currentQuestionIndex < criteria.length - 1) {
          setCurrentQuestionIndex((prevIndex) => prevIndex + 1);
        } else {
          // If it's the last question, submit the form
          setSubmitLoading(true);

          const criteriaForSubmission = criteria.map((criterion) => ({
            actionId: criterion.actionId,
            answers: criterion.answer,
          }));

          const response = await general.makeRequest({
            url: `/v2/entities/${entityId}/campaigns/${questId}/verify`,
            method: "POST",
            headers: {
              "Content-Type": "application/json",
              userId,
              token,
              apiKey,
            },
            body: { actions: criteriaForSubmission, campaignVariationId },
          });
          if (response.success) {
            setSuccessModalVisible(true);
          } else {
            if (onError) {
              onError(AllEvents.VERIFY_ACTION, response.error, response);
            }
          }
        }
      } else {
        if (onError) {
          onError(AllEvents.VERIFY_ACTION, "Please fill something");
        }
      }
    } catch (error: any) {
      if (onError) {
        onError(AllEvents.VERIFY_ACTION, error.message);
      }
    } finally {
      setSubmitLoading(false);
    }
  };

  const updateCriteriaAnswer = (
    criteriaId: string,
    answer: (string | number)[]
  ) => {
    // Make a copy of the criteria state
    const updatedCriteria = criteria.map((criteriaItem) => {
      if (criteriaItem.actionId === criteriaId) {
        // If the criteriaId matches, update the answer for that criteria
        return {
          ...criteriaItem,
          answer: answer,
        };
      }
      return criteriaItem; // Return the criteria item unchanged
    });

    // Update the criteria state with the modified copy
    setCriteria(updatedCriteria);
    if (onUpdateAction) {
      onUpdateAction(criteriaId, answer);
    }
  };

  const handleGoBack = () => {
    setCurrentQuestionIndex((prevIndex) => Math.max(prevIndex - 1, 0)); // Ensure index doesn't go below 0
  };

  const handleOptionSelect = (optionIndex: number, option: any) => {
    // If the clicked option is already selected, unselect it
    if (optionIndex === selectedItemIndex) {
      setSelectedItemIndex(null);
      updateCriteriaAnswer(criteria[currentQuestionIndex].actionId, []);
    } else {
      setSelectedItemIndex(optionIndex);
      updateCriteriaAnswer(criteria[currentQuestionIndex].actionId, [option]);
    }
  };
  return (
    <View style={{ flex: 1 }}>
      <Modal
        visible={modalVisible}
        animationType="slide"
        transparent={true}
        onRequestClose={() => setModalVisible(false)}
      >
        <View style={[styles.mainModalContainer]}>
          <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 }]}
          >
            <View>
              <View style={{ padding: 20 }}>
                <CustomText
                fontStyle="semibold"
                  style={[styles.headerTextStyle, { ...styleConfig?.Heading }]}
                >
                  {header ? header : "Choose an option"}
                </CustomText>
              </View>

              <View style={styles.iconContainer}>
                <View style={[styles.iconBackgroundView]}>
                  <GamifiedIcon />
                </View>
              </View>

              <View style={{ alignItems: "center", paddingBottom: 20 }}>
                <View
                  style={[
                    styles.questionBackgroundViewStyle,

                    { ...styleConfig?.FormContainer },
                  ]}
                >
                  {/* Loading Indicator */}
                  {loading && (
                    <View style={styles.loadingMainView}>
                      <ActivityIndicator size="large" color="#545454" />
                      <CustomText>Loading...</CustomText>
                    </View>
                  )}

                  {criteria.length > 0 && criteria[currentQuestionIndex] && (
                    <>
                      <CustomText style={[styles.questionHeaderTextStyle]}>
                        {criteria[currentQuestionIndex]?.actionType ===
                          "USER_INPUT_MULTI_CHOICE" ||
                        criteria[currentQuestionIndex]?.actionType ===
                          "USER_INPUT_SINGLE_CHOICE"
                          ? "Select an Option"
                          : "Fill the Details"}
                      </CustomText>

                      <ScrollView showsVerticalScrollIndicator={false}>
                        <View>
                          {criteria[currentQuestionIndex]?.actionType ===
                          "USER_INPUT_TEXT" ? (
                            <View style={{ marginVertical: 10 }}>
                              <CustomText
                              fontStyle="semibold"
                                style={[
                                  styles.questionTextStyle,
                                  { ...styleConfig?.Question },
                                ]}
                              >
                                {criteria[currentQuestionIndex].title}
                              </CustomText>
                              <View
                                style={[
                                  styles.inputViewStyle,
                                  { ...styleConfig?.Input },
                                ]}
                              >
                                <TextInput
                                  placeholder={`${criteria[currentQuestionIndex].title}`}
                                  placeholderTextColor={"#8E8E8E"}
                                  style={[styles.textInputInnerStyle]}
                                  onChangeText={(text) =>
                                    updateCriteriaAnswer(
                                      criteria[currentQuestionIndex].actionId,
                                      [text]
                                    )
                                  }
                                  value={
                                    criteria[currentQuestionIndex].answer
                                      .length > 0
                                      ? String(
                                          criteria[currentQuestionIndex]
                                            .answer[0]
                                        )
                                      : ""
                                  }
                                />
                              </View>
                            </View>
                          ) : (
                            <>
                              {criteria[currentQuestionIndex]?.actionType ===
                              "USER_INPUT_SINGLE_CHOICE" ? (
                                <View>
                                  <CustomText
                                  fontStyle="semibold"
                                    style={[
                                      styles.questionTextStyle,
                                      { ...styleConfig?.Question },
                                    ]}
                                  >
                                    {criteria[currentQuestionIndex].title}
                                  </CustomText>
                                  <View style={{ flex: 1, gap: 16 }}>
                                    {criteria[
                                      currentQuestionIndex
                                    ]?.options?.map((option, optionIndex) => (
                                      <TouchableOpacity
                                        key={optionIndex}
                                        style={[
                                          styles.optionsViewStyle,
                                          {
                                            borderColor:
                                              optionIndex === selectedItemIndex
                                                ? "#9035FF"
                                                : "#E0E0E0",
                                          },
                                        ]}
                                        onPress={() =>
                                          handleOptionSelect(
                                            optionIndex,
                                            option
                                          )
                                        }
                                      >
                                        {optionIndex !== selectedItemIndex ? (
                                          <OutterRadioIcon />
                                        ) : (
                                          <SelectedRadioIcon />
                                        )}

                                        <CustomText>{option}</CustomText>
                                      </TouchableOpacity>
                                    ))}
                                  </View>
                                </View>
                              ) : (
                                <>
                                  {criteria[currentQuestionIndex]
                                    ?.actionType === "USER_INPUT_TEXTAREA" ? (
                                    <View style={{ marginVertical: 10 }}>
                                      <CustomText
                                      fontStyle="semibold"
                                        style={[
                                          styles.questionTextStyle,
                                          { ...styleConfig?.Question },
                                        ]}
                                      >
                                        {criteria[currentQuestionIndex].title}
                                      </CustomText>
                                      <View
                                        style={[
                                          styles.inputViewStyle,
                                          { ...styleConfig?.Input },
                                        ]}
                                      >
                                        <TextInput
                                          placeholder="Describe your self"
                                          placeholderTextColor={"#8E8E8E"}
                                          maxLength={100}
                                          numberOfLines={4}
                                          style={[styles.textInputInnerStyle]}
                                          onChangeText={(text) =>
                                            updateCriteriaAnswer(
                                              criteria[currentQuestionIndex]
                                                .actionId,
                                              [text]
                                            )
                                          }
                                          value={
                                            criteria[currentQuestionIndex]
                                              .answer.length > 0
                                              ? String(
                                                  criteria[currentQuestionIndex]
                                                    .answer[0]
                                                )
                                              : ""
                                          }
                                        />
                                      </View>
                                    </View>
                                  ) : (
                                    <>
                                      {criteria[currentQuestionIndex]
                                        ?.actionType ===
                                      "USER_INPUT_MULTI_CHOICE" ? (
                                        <View style={{ marginVertical: 10 }}>
                                          <CustomText
                                          fontStyle="semibold"
                                            style={[
                                              styles.questionTextStyle,
                                              { ...styleConfig?.Question },
                                            ]}
                                          >
                                            {
                                              criteria[currentQuestionIndex]
                                                .title
                                            }
                                          </CustomText>

                                          <View
                                            style={{
                                              flexDirection: "row",
                                              marginTop: 4,
                                            }}
                                          >
                                            <MultipleSelectCheckbox
                                              option={
                                                criteria[currentQuestionIndex]
                                                  ?.options || []
                                              }
                                              onSelect={(item) =>
                                                updateCriteriaAnswer(
                                                  criteria[currentQuestionIndex]
                                                    .actionId,
                                                  item
                                                )
                                              }
                                              selected={
                                                criteria[currentQuestionIndex]
                                                  .answer
                                              }
                                              styleConfig={{
                                                ...styleConfig?.MultiChoice,
                                              }}
                                            />
                                          </View>
                                        </View>
                                      ) : (
                                        // <View style={{ marginVertical: 10 }}>
                                        //    <CustomText style={[styles.questionTextStyle,{...styleConfig?.Question}]}>{criteria[currentQuestionIndex].title}</CustomText>
                                        //   <View
                                        //     style={{
                                        //       flexDirection: "row",
                                        //       marginTop: 5,
                                        //     }}
                                        //   >
                                        //     <RadioGroup
                                        //       options={criteria[currentQuestionIndex]?.options || []}
                                        //       onSelect={(item) =>
                                        //         updateCriteriaAnswer(
                                        //           criteria[currentQuestionIndex].actionId,
                                        //           [item]
                                        //         )

                                        //       }
                                        //     />
                                        //   </View>
                                        // </View>
                                        <>
                                          {criteria[currentQuestionIndex]
                                            ?.actionType ===
                                          "USER_INPUT_EMAIL" ? (
                                            <View style={{ marginTop: 10 }}>
                                              <CustomText
                                              fontStyle="semibold"
                                                style={[
                                                  styles.questionTextStyle,
                                                  { ...styleConfig?.Question },
                                                ]}
                                              >
                                                {
                                                  criteria[currentQuestionIndex]
                                                    .title
                                                }
                                              </CustomText>

                                              <View
                                                style={[
                                                  styles.inputViewStyle,
                                                  { ...styleConfig?.Input },
                                                ]}
                                              >
                                                <TextInput
                                                  placeholder={`${criteria[currentQuestionIndex].title}`}
                                                  placeholderTextColor={
                                                    "#8E8E8E"
                                                  }
                                                  keyboardType="email-address"
                                                  style={[
                                                    styles.textInputInnerStyle,
                                                  ]}
                                                  onChangeText={(text) =>
                                                    updateCriteriaAnswer(
                                                      criteria[
                                                        currentQuestionIndex
                                                      ].actionId,
                                                      [text]
                                                    )
                                                  }
                                                  value={
                                                    criteria[
                                                      currentQuestionIndex
                                                    ].answer.length > 0
                                                      ? String(
                                                          criteria[
                                                            currentQuestionIndex
                                                          ].answer[0]
                                                        )
                                                      : ""
                                                  }
                                                />
                                              </View>
                                            </View>
                                          ) : (
                                            ""
                                          )}
                                        </>
                                      )}
                                    </>
                                  )}
                                </>
                              )}
                            </>
                          )}
                        </View>
                      </ScrollView>
                      <View style={[styles.buttonViewStyle]}>
                        <TouchableOpacity
                          disabled={currentQuestionIndex == 0}
                          style={[
                            styles.cancelButtonViewStyle,

                            { ...styleConfig?.SecondaryButton },
                          ]}
                          onPress={handleGoBack}
                        >
                          <CustomText
                          fontStyle="semibold"
                            style={{ ...styleConfig?.SecondaryButton }}
                          >
                            {currentQuestionIndex === 0 ? "Cancel" : "Previous"}
                          </CustomText>
                        </TouchableOpacity>

                        <LinearGradient
                          colors={["#9035FF", "#0065FF"]}
                          start={{ x: 0.1, y: 0 }}
                          end={{ x: 1, y: 1 }}
                          locations={[0.0036, 1]}
                          style={[
                            styles.nextButtonViewStyle,

                            { ...styleConfig?.PrimaryButton },
                          ]}
                        >
                          <TouchableOpacity
                            style={{
                              justifyContent: "center",
                              alignItems: "center",
                              width: "100%",
                              paddingVertical: 13,
                            }}
                            onPress={onNext} // Change to onSubmit for the last question
                          >
                            {submitLoading ? (
                              <ActivityIndicator size="small" color="white" />
                            ) : (
                              <CustomText
                              fontStyle="semibold"
                                style={[
                                  { color: "white" },
                                  { ...styleConfig?.PrimaryButton },
                                ]}
                              >
                                {currentQuestionIndex === criteria.length - 1
                                  ? "Submit"
                                  : "Next"}
                              </CustomText>
                            )}
                          </TouchableOpacity>
                        </LinearGradient>
                      </View>
                    </>
                  )}
                </View>
              </View>

              {/* footer */}
              <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>
          </LinearGradient>
        </View>
      </Modal>

      {successModalVisible && (
        <Modal
          animationType="slide"
          transparent={true}
          visible={successModalVisible}
          onRequestClose={() => {
            setSuccessModalVisible(!successModalVisible);
          }}
        >
          <View style={[styles.modalOutterViewStyle]}>
            <View
              style={[
                styles.successModalViewStyle,

                { ...styleConfig?.ThanksPopup },
              ]}
            >
              <TouchableOpacity
                style={{ padding: 20, alignItems: "flex-end" }}
                onPress={() => {
                  setSuccessModalVisible(false);
                  setCriteria((prevCriteria) => {
                    const updatedCriteria = prevCriteria.map((criterion) => ({
                      ...criterion,
                      answer: [], // Resetting the answer for each criterion
                    }));
                    return updatedCriteria;
                  });
                  setCurrentQuestionIndex(0);
                }}
              >
                <CrossIcon size={16} color="#939393" />
              </TouchableOpacity>
              <View style={[styles.ImageViewStyle]}>
                <Success />
              </View>

              <View style={[styles.midContainerViewStyles]}>
                <View>
                  <CustomText
                    style={[
                      styles.successHeaderTextStyle,
                      { ...styleConfig?.ThanksPopupHeading },
                    ]}
                  >
                    Thanks for reaching out!
                  </CustomText>
                </View>

                <View>
                  <CustomText
                    style={[
                      styles.successDescriptionTextStyle,
                      { ...styleConfig?.ThanksPopupDescription },
                    ]}
                  >
                    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,

                      { ...styleConfig?.ThanksPopupGotoHome },
                    ]}
                    onPress={() => {
                      setSuccessModalVisible(false);
                      setCriteria((prevCriteria) => {
                        const updatedCriteria = prevCriteria.map(
                          (criterion) => ({
                            ...criterion,
                            answer: [], // Resetting the answer for each criterion
                          })
                        );
                        return updatedCriteria;
                      });
                      setCurrentQuestionIndex(0);
                    }}
                  >
                    <CustomText
                      style={[
                        styles.submitButtonTextStyle,
                        { ...styleConfig?.ThanksPopupGotoHome },
                      ]}
                    >
                      Go to home!
                    </CustomText>
                  </TouchableOpacity>
                </View>
              </View>
              <View style={{ justifyContent: "flex-end" }}>
                <View
                  style={[
                    styles.footerView,
                    {
                      ...styleConfig?.thanksPopUpFooter?.thanksPopUpFooterStyle,
                    },
                  ]}
                >
                  <View style={[styles.footerInnerView]}>
                    <CustomText
                      style={[
                        styles.footerText,
                        {
                          ...styleConfig?.thanksPopUpFooter
                            ?.thanksPopUpFooterText,
                        },
                      ]}
                    >
                      Powered by Quest Labs
                    </CustomText>
                    <QuestIcon
                      color={
                        styleConfig?.thanksPopUpFooter?.thanksPopUpFooterIcon
                          ?.color
                      }
                    />
                  </View>
                </View>
              </View>
            </View>
          </View>
        </Modal>
      )}
    </View>
  );
}