import {
  View,
  Text,
  TouchableOpacity,
  Modal,
  TextInput,
  ActivityIndicator,
  Keyboard,
  ScrollView,
} from "react-native";
import React, { useContext, useEffect, useState } from "react";
import { ICriteria, IQuest, Props } from "./Survey.types";
import { styles } from "./Survey.styles";
import general from "../../common/General/General";
import { QuestContext } from "../../context/QuestContext";
import QuestLogo from "../../assets/ReactSVG/QuestLogo";
import Loader from "../Loader/Loader";
import SurveyActions from "./SurveyActions";
import SurveyModal from "./SurveyModal";
import useQuestNotification from "../../hooks/QuestNotification/useQuestNotification";

export default function Survey({
  token,
  userId,
  starColor,
  style,
  ratingType,
  multipleChoice,
  selectedQuestData,
  setMain,
  setSuccess,
  buttonType,
  template,
  questId,
  setModalVisibilityParent,
  modalVisiblityParent,
}: Props) {
  const [quests, setQuests] = useState<IQuest[]>([]);
  const [keyboardHeight, setKeyboardHeight] = useState(0);
  const [selectedQuest, setSelectedQuest] = useState<IQuest | undefined>(
    selectedQuestData
  );
  const { apiKey, entityId } = useContext(QuestContext);
  const [submitLoading, setSubmitLoading] = useState(false);
  const [ratingModalData, setRatingModalData] = useState<IQuest | undefined>(
    undefined
  );
  const [ratingModal1, setRatingModal1] = useState(false);
  const [ratingModal2, setRatingModal2] = useState(false);
  const [ratingModalTextinput, setRatingModalTextinput] = useState("");
  const [ratingModalTextArea, setRatingModalTextArea] = useState("");
  const [loading, setLoading] = useState(false);
  const { error } = useQuestNotification();
  const [modalVisible, setModalVisible] = useState(true);

  const fetchQuestData = async (questId: string) => {
    return general.makeRequest({
      url: `/entities/${entityId}/quests/${questId}`,
      method: "GET",
      query: { userId },
      headers: {
        "Content-Type": "application/json",
        userId,
        token,
        apiKey,
      },
    });
  };

  const fetchData = async (questId: string) => {
    try {
      let response: Record<string, any> = {};

      response = await fetchQuestData(questId);

      const fetchedCriterias: ICriteria[] = [];

      if (response?.eligibilityData) {
        for (let criteria of response.eligibilityData) {
          fetchedCriterias.push({
            criteriaId: criteria.data.criteriaId,
            criteriaType: criteria.data.criteriaType,
            title: criteria.data.metadata.title,
            ...(criteria?.data?.metadata?.options && {
              options: criteria.data.metadata.options,
            }),
            answer: [],
          });
        }
      }

      if (
        questId &&
        fetchedCriterias.length > 0 &&
        response?.data?.title &&
        response?.data?.description
      ) {
        return {
          questId,
          criterias: fetchedCriterias,
          questName: response.data.title,
          questDescription: response.data.description,
          session: response.session,
        } as IQuest;
      }
    } catch (error) {
      error("Something Went Wrong");
    }
  };

  useEffect(() => {
    setModalVisible?.(modalVisiblityParent);
  }, [modalVisiblityParent]);

  useEffect(() => {
    setModalVisibilityParent?.(modalVisible);
  }, [modalVisible]);

  useEffect(() => {
    if (!selectedQuestData && questId) {
      const fetchDataAndUpdateState = async () => {
        try {
          setLoading(true);

          const response = await fetchData(questId);

          if (response) {
            const { criterias, questDescription, questId, questName, session } =
              response;
            if (template == "modal2") {
              const filterData = criterias.filter(
                (item) => item.criteriaType !== "RATING"
              );
              const filterRatingData = criterias.filter(
                (item) => item.criteriaType === "RATING"
              );

              const normalData = {
                criterias: filterData,
                questDescription,
                questId,
                questName,
                session,
                answer: [],
              };

              setSelectedQuest(normalData);

              const ratingData = {
                criterias: filterRatingData.map((item) => ({
                  ...item,
                  answer: [],
                })),
                questDescription,
                questId,
                questName,
                session,
                answer: [],
              };

              setRatingModalData(ratingData);
            } else {
              setSelectedQuest(response);
            }
          }
          setLoading(false);
        } catch (error) {
          error("Something Went Wrong");
          setLoading(false);
        }
      };

      fetchDataAndUpdateState();
    }
  }, [selectedQuestData, questId]);

  useEffect(() => {
    if (template === "modal2") {
      if (selectedQuestData) {
        const { criterias, questDescription, questId, questName, session } =
          selectedQuestData;

        const filterData = criterias.filter(
          (item) => item.criteriaType !== "RATING"
        );
        const filterRatingData = criterias.filter(
          (item) => item.criteriaType === "RATING"
        );

        const normalData = {
          criterias: filterData,
          questDescription,
          questId,
          questName,
          session,
          answer: [],
        };

        setSelectedQuest(normalData);

        const ratingData = {
          criterias: filterRatingData.map((item) => ({ ...item, answer: [] })),
          questDescription,
          questId,
          questName,
          session,
          answer: [],
        };

        setRatingModalData(ratingData);
      }
    } else {
      setSelectedQuest(selectedQuestData);
    }
  }, [selectedQuestData, template]);

  const handleSubmit = async () => {
    const isFilled = selectedQuest?.criterias.find((item) => {
      if (typeof item.answer[0] === "string") {
        return item.answer[0].trim().length === 0;
      } else if (typeof item.answer[0] === "number") {
        return false;
      }
      return true;
    });

    if (isFilled) {
      error("Please fill all the fields");
      return;
    }
    if (ratingModalData?.criterias[0]?.answer) {
      ratingModalData?.criterias[0].answer.push(ratingModalTextinput);
      ratingModalData?.criterias[0].answer.push(ratingModalTextArea);
    }

    setSubmitLoading(true);
    try {
      if (selectedQuest) {
        const allCriterias = [
          ...selectedQuest.criterias,
          ...(ratingModalData?.criterias || []),
        ];
        const response = await general.makeRequest({
          url: `/entities/${entityId}/quests/${selectedQuest.questId}/verify-all`,
          method: "POST",
          query: { userId },
          headers: {
            "Content-Type": "application/json",
            userId,
            token,
            apiKey,
          },
          body: {
            criterias: allCriterias,
            session: selectedQuest?.session,
            userId,
          },
        });

        if (response.success) {
          const updatedCriteriasSelected = selectedQuest?.criterias?.map(
            (criteria) => {
              criteria.answer = [];
              return criteria;
            }
          );

          if (selectedQuest) {
            selectedQuest.criterias = updatedCriteriasSelected || [];

            const updatedQuestsSelected = quests.map((quest) => {
              if (quest.questId === selectedQuest.questId) {
                return selectedQuest;
              }
              return quest;
            });

            setQuests([...updatedQuestsSelected]);
          }

          const updatedCriteriasRating = ratingModalData?.criterias?.map(
            (criteria) => {
              return criteria;
            }
          );

          if (ratingModalData) {
            ratingModalData.criterias = updatedCriteriasRating || [];

            const updatedQuestsRating = quests.map((quest) => {
              if (quest.questId === ratingModalData.questId) {
                return ratingModalData;
              }
              return quest;
            });

            setQuests([...updatedQuestsRating]);
          }
        }
        setSubmitLoading(false);
        setSuccess?.(true);
      }
    } catch (error) {
      setSubmitLoading(false);
    } finally {
      setSubmitLoading(false);
    }
  };

  const handleBackPress = () => {
    setModalVisible?.(false);
    setMain?.(true);
    return true;
  };

  useEffect(() => {
    const keyboardDidShowListener = Keyboard.addListener(
      "keyboardDidShow",
      (event) => {
        setKeyboardHeight(event.endCoordinates.height);
      }
    );
    const keyboardDidHideListener = Keyboard.addListener(
      "keyboardDidHide",
      () => {
        setKeyboardHeight(0);
      }
    );
    return () => {
      keyboardDidShowListener.remove();
      keyboardDidHideListener.remove();
    };
  }, [modalVisible, selectedQuest]);

  const Gobackbutton = () => {
    setRatingModal2(false);
    setRatingModal1(true);
  };

  const updateCriteriaAnswer = (
    criteriaId: string,
    answer: (string | number)[]
  ) => {
    if (selectedQuest) {
      const updatedCriterias = selectedQuest.criterias.map((criteria) => {
        if (criteria.criteriaId === criteriaId) {
          criteria.answer = answer;
        }
        return criteria;
      });

      if (selectedQuest) {
        selectedQuest.criterias = updatedCriterias;

        const updatedQuests = quests.map((quest) => {
          if (quest.questId === selectedQuest.questId) {
            return selectedQuest;
          }
          return quest;
        });
        setQuests([...updatedQuests]);
      }
    }
  };

  const updateCriteriaAnswerForRatingData = (
    criteriaId: string,
    answer: (string | number)[]
  ) => {
    if (ratingModalData) {
      const updatedCriterias = ratingModalData?.criterias.map((criteria) => {
        if (criteria.criteriaId === criteriaId) {
          criteria.answer = answer;
        }
        return criteria;
      });

      if (ratingModalData) {
        ratingModalData.criterias = updatedCriterias;

        const updatedQuests = quests.map((quest) => {
          if (quest.questId === ratingModalData.questId) {
            return ratingModalData;
          }
          return quest;
        });
        setQuests([...updatedQuests]);
      }
    }
  };

  const handleCancel = () => {
    setModalVisible?.(false);
    setMain?.(true);
  };

  const handleRatingModalSkip = () => {
    const isFilled = ratingModalData?.criterias.find((item) => {
      if (typeof item.answer[0] === "string") {
        return item.answer[0].trim().length === 0;
      } else if (typeof item.answer[0] === "number") {
        return false;
      }
      return true;
    });
    if (isFilled) {
      error("Please Choose any rating to continue");
      return;
    }
    setRatingModal2(true);
    setRatingModal1(false);
  };

  const handlebackPressRatingModal = () => {
    setModalVisible?.(true);
    setRatingModal1(false);
  };
  const handleRatingModalNext = () => {
    const isFilled = selectedQuest?.criterias.find((item) => {
      if (typeof item.answer[0] === "string") {
        return item.answer[0].trim().length === 0;
      } else if (typeof item.answer[0] === "number") {
        return false;
      }
      return true;
    });
    if (isFilled) {
      error("Please fill all the fields");
      return;
    }
    setModalVisible?.(false);
    setRatingModal1(true);
  };

  const handleRatingModalNext2 = () => {
    const isFilled = ratingModalData?.criterias.find((item) => {
      if (typeof item.answer[0] === "string") {
        return item.answer[0].trim().length === 0;
      } else if (typeof item.answer[0] === "number") {
        return false;
      }
      return true;
    });
    if (isFilled) {
      error("Please fill all the fields");
      return;
    }
    setRatingModal2(true);
    setRatingModal1(false);
  };

  if (loading) {
    return <Loader />;
  }

  return (
    <>
      {template === "modal2" && selectedQuest && (
        <>
          <SurveyModal
            modalOutterViewStyle={style?.modalOutterViewStyle}
            modalInnerViewStyle={style?.modalInnerViewStyle}
            modalHeaderViewStyle={style?.modalHeaderViewStyle}
            modalHeaderInlineViewStyle={style?.modalHeaderInlineViewStyle}
            modalHeaderTextStyle={style?.modalHeaderTextStyle}
            selectedQuest={selectedQuest}
            modalHeaderDescriptionStyle={style?.modalHeaderDescriptionStyle}
            buttonType={buttonType}
            handleBackPress={handleBackPress}
            handleSubmit={
              ratingModalData?.criterias && ratingModalData.criterias.length > 0
                ? handleRatingModalNext
                : handleSubmit
            }
            inputHeaderTextStyle={style?.inputHeaderTextStyle}
            inputViewStyle={style?.inputViewStyle}
            modalVisible={modalVisible}
            multipleChoice={multipleChoice}
            ratingType={ratingType}
            keyboardHeight={keyboardHeight}
            starColor={starColor}
            submitLoading={submitLoading}
            updateCriteriaAnswer={updateCriteriaAnswer}
            template={template}
            handleCancel={handleCancel}
            ratingModalData={ratingModalData}
          />

          {ratingModal1 && ratingModalData && (
            <Modal
              animationType="slide"
              transparent={true}
              onRequestClose={() => handlebackPressRatingModal()}
            >
              <View style={[styles.modalOutterViewStyle]}>
                <View style={[styles.modalInnerViewStyle]}>
                  <ScrollView>
                    <View style={[styles.ratingModal1View]}>
                      <Text style={[styles.ratingModalQuestionLabel]}>
                        Question 1/2
                      </Text>
                      <Text style={[styles.ratingModalQuestion]}>
                        To what extent do you agree with the following statement
                      </Text>
                    </View>

                    <View
                      style={{
                        paddingHorizontal: 20,
                        gap: 20,
                        paddingBottom: 20,
                      }}
                    >
                      <View
                        style={{
                          paddingHorizontal: 12,
                          paddingVertical: 10,
                          borderWidth: 1,
                          borderColor: "#ECECEC",
                          borderRadius: 10,
                        }}
                      >
                        <View>
                          <TextInput
                            placeholder="“It was easy to handle my issue”"
                            placeholderTextColor="#8E8E8E"
                            style={[styles.ratingModalTextInput]}
                            onChangeText={(text) =>
                              setRatingModalTextinput(text)
                            }
                            value={ratingModalTextinput}
                          />
                        </View>
                      </View>

                      <SurveyActions
                        criteriaType={
                          ratingModalData?.criterias?.[0]?.criteriaType
                        }
                        ratingType={"colored"}
                        answer={ratingModalData?.criterias?.[0]?.answer}
                        criteriaId={ratingModalData?.criterias?.[0]?.criteriaId}
                        starColor={starColor}
                        title={ratingModalData?.criterias?.[0]?.title}
                        options={ratingModalData?.criterias?.[0]?.options}
                        inputHeaderTextStyle={style?.inputHeaderTextStyle}
                        inputViewStyle={style?.inputViewStyle}
                        updateCriteriaAnswer={updateCriteriaAnswerForRatingData}
                        multipleChoice={multipleChoice}
                      />
                      {buttonType == "double" ? (
                        <View style={[styles.doubleButtonsView]}>
                          <TouchableOpacity
                            onPress={() => handleRatingModalSkip()}
                            style={[
                              styles.cancelButtonViewStyle,
                              { borderColor: "#EFEFEF" },
                            ]}
                          >
                            <Text
                              style={[
                                styles.cancelButtonTextstyle,
                                { color: "#939393" },
                              ]}
                            >
                              skip
                            </Text>
                          </TouchableOpacity>
                          <TouchableOpacity
                            onPress={handleRatingModalNext2}
                            style={[
                              styles.doubleSubmitButtonView,
                              { opacity: submitLoading ? 0.5 : 1 },
                            ]}
                            disabled={submitLoading}
                          >
                            {submitLoading ? (
                              <ActivityIndicator size={20} color={"white"} />
                            ) : (
                              <Text
                                style={[styles.doubleSubmitButtonTextStyle]}
                              >
                                Next
                              </Text>
                            )}
                          </TouchableOpacity>
                        </View>
                      ) : (
                        <TouchableOpacity
                          onPress={handleRatingModalNext2}
                          style={[
                            styles.submitButtonViewStyle,
                            { opacity: submitLoading ? 0.5 : 1 },
                          ]}
                          disabled={submitLoading}
                        >
                          {submitLoading ? (
                            <ActivityIndicator size={20} color={"white"} />
                          ) : (
                            <Text style={[styles.submitButtonTextStyle]}>
                              Next
                            </Text>
                          )}
                        </TouchableOpacity>
                      )}
                    </View>
                    <View style={[styles.footerView]}>
                      <View style={[styles.footerInnerView]}>
                        <Text style={[styles.footerText]}>
                          Powered by Quest Labs
                        </Text>
                        <QuestLogo />
                      </View>
                    </View>
                  </ScrollView>
                </View>
              </View>
            </Modal>
          )}

          {ratingModal2 && ratingModalData && (
            <Modal
              animationType="slide"
              transparent={true}
              onRequestClose={() => Gobackbutton()}
            >
              <View style={[styles.modalOutterViewStyle]}>
                <View style={[styles.modalInnerViewStyle]}>
                  <ScrollView>
                    <View style={[styles.ratingModal1View]}>
                      <Text style={[styles.ratingModalQuestionLabel]}>
                        Question 2/2
                      </Text>
                      <Text style={[styles.ratingModalQuestion]}>
                        To what extent do you agree with the following statement
                      </Text>
                    </View>
                    <View
                      style={{
                        paddingHorizontal: 20,
                        gap: 20,
                        paddingBottom: 20,
                      }}
                    >
                      <View>
                        <Text style={[styles.inputHeaderTextStyle]}>
                          {"Tell us how can we improve"}
                        </Text>
                        <TextInput
                          placeholder="Write your message here..."
                          placeholderTextColor={"#8E8E8E"}
                          // maxLength={100}
                          numberOfLines={5}
                          multiline
                          style={[styles.textAreaInputInnerStyle]}
                          onChangeText={(text) => setRatingModalTextArea(text)}
                          value={ratingModalTextArea}
                        />
                      </View>

                      {buttonType == "double" ? (
                        <View style={[styles.doubleButtonsView]}>
                          <TouchableOpacity
                            onPress={() => Gobackbutton()}
                            style={[
                              styles.cancelButtonViewStyle,
                              { borderColor: "#EFEFEF" },
                            ]}
                          >
                            <Text
                              style={[
                                styles.cancelButtonTextstyle,
                                { color: "#939393" },
                              ]}
                            >
                              {"Go Back"}
                            </Text>
                          </TouchableOpacity>
                          <TouchableOpacity
                            onPress={handleSubmit}
                            style={[
                              styles.doubleSubmitButtonView,
                              { opacity: submitLoading ? 0.5 : 1 },
                            ]}
                            disabled={submitLoading}
                          >
                            {submitLoading ? (
                              <ActivityIndicator size={20} color={"white"} />
                            ) : (
                              <Text
                                style={[styles.doubleSubmitButtonTextStyle]}
                              >
                                {"Submit"}
                              </Text>
                            )}
                          </TouchableOpacity>
                        </View>
                      ) : (
                        <TouchableOpacity
                          onPress={handleSubmit}
                          style={[
                            styles.submitButtonViewStyle,
                            { opacity: submitLoading ? 0.5 : 1 },
                          ]}
                          disabled={submitLoading}
                        >
                          {submitLoading ? (
                            <ActivityIndicator size={20} color={"white"} />
                          ) : (
                            <Text style={[styles.submitButtonTextStyle]}>
                              Send your review
                            </Text>
                          )}
                        </TouchableOpacity>
                      )}
                    </View>
                    <View style={[styles.footerView]}>
                      <View style={[styles.footerInnerView]}>
                        <Text style={[styles.footerText]}>
                          Powered by Quest Labs
                        </Text>
                        <QuestLogo />
                      </View>
                    </View>
                  </ScrollView>
                </View>
              </View>
            </Modal>
          )}
        </>
      )}

      {template !== "modal2" && selectedQuest && (
        <SurveyModal
          modalOutterViewStyle={style?.modalOutterViewStyle}
          modalInnerViewStyle={style?.modalInnerViewStyle}
          modalHeaderViewStyle={style?.modalHeaderViewStyle}
          modalHeaderInlineViewStyle={style?.modalHeaderInlineViewStyle}
          modalHeaderTextStyle={style?.modalHeaderTextStyle}
          selectedQuest={selectedQuest}
          modalHeaderDescriptionStyle={style?.modalHeaderDescriptionStyle}
          buttonType={buttonType}
          handleBackPress={handleBackPress}
          handleSubmit={handleSubmit}
          inputHeaderTextStyle={style?.inputHeaderTextStyle}
          inputViewStyle={style?.inputViewStyle}
          modalVisible={modalVisible}
          multipleChoice={multipleChoice}
          ratingType={ratingType}
          keyboardHeight={keyboardHeight}
          starColor={starColor}
          submitLoading={submitLoading}
          updateCriteriaAnswer={updateCriteriaAnswer}
          template={template}
          handleCancel={handleCancel}
          ratingModalData={ratingModalData}
        />
      )}
    </>
  );
}