import React, { useContext, useEffect, useState } from "react";
import {
  ActivityIndicator,
  Modal,
  SafeAreaView,
  ScrollView,
  Text,
  TextInput,
  TouchableOpacity,
  View,
} from "react-native";
import { ICriteria, props } from "./SurveyForm.types";
import { styles } from "./SurveyForm.styles";
import CrossIcon from "../../assets/ReactSVG/CrossIcon";
import CustomRating from "../CustomRating/CustomRating";
import RadioGroup from "../RedioButton/RadioGroup";
import Multiselect from "../MultiSelect/Multiselect";
import QuestIcon from "../../assets/ReactSVG/QuestIcon";
import { QuestContext } from "../../context/QuestContext";
import general from "../../common/General/General";
import { AllEvents } from "../../common/enum";
import Success from "../../assets/ReactSVG/Success";
import NumberRating from "../NumberRating/NumberRating";
import ColoredRating from "../ColoredRating/ColoredRating";
import EmojiRating from "../EmojiRating/EmojiRating";
import { LinearGradient } from "expo-linear-gradient";
import CustomText from "../../common/CustomText";

export default function SurveyForm({
  actions,
  campaignVariationId,
  description,
  loading,
  questId,
  userToken: token,
  questUserId: userId,
  styleConfig,
  title,
  onError,
  itemsPerPage = 1,
  ratingType = "star",
}: props) {
  const { apiKey, entityId } = useContext(QuestContext);
  const [submitLoading, setSubmitLoading] = useState(false);
  const [Data, setDemoData] = useState<ICriteria[]>(actions || []);
  const [success, setSuccess] = useState(false);
  const [currentPage, setCurrentPage] = useState(0);
  const countArray = 5;
  const ratingArray = Array.from(
    { length: countArray || 5 },
    (_, index) => index + 1
  );
  useEffect(() => {
    if (actions) {
      setDemoData(actions);
    }
  }, [actions]);

  const updateCriteriaAnswer = (
    actionId: string,
    answers: (string | number)[]
  ) => {
    setDemoData((prevData) =>
      prevData.map((item) =>
        item.actionId === actionId ? { ...item, answer: answers } : item
      )
    );
  };

  const validatePage = () => {
    const currentData = Data.slice(currentPage, currentPage + itemsPerPage);
    return currentData.every(
      (item) => item.answer.length > 0 && item.answer[0] !== ""
    );
  };

  const handleSubmit = async () => {
    if (validatePage()) {
      try {
        if (Data.some((item) => item.answer.length > 0)) {
          setSubmitLoading(true);
          const criteriaForSubmission = Data.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: campaignVariationId,
            },
          });
          if (response.success) {
            setSuccess(true);
          } else {
            if (onError) {
              onError(AllEvents.VERIFY_ACTION, response.error, response);
            }
          }
        }
      } catch (error: any) {
        if (onError) {
          onError(AllEvents.VERIFY_ACTION, error.message);
        }
      } finally {
        setSubmitLoading(false);
      }
    }
  };

  const handleCloseSuccess = () => {
    setSuccess(false);
    setDemoData((prevData) =>
      prevData.map((action) => ({ ...action, answer: [] }))
    );
    setCurrentPage(0);
  };

  const nextPage = () => {
    if (validatePage() && currentPage + itemsPerPage < Data.length) {
      setCurrentPage((prevPage) => prevPage + itemsPerPage);
    }
  };

  const prevPage = () => {
    if (currentPage > 0) {
      setCurrentPage((prevPage) => prevPage - itemsPerPage);
    }
  };

  const currentData = Data.slice(currentPage, currentPage + itemsPerPage);

  const isLastPage =
    itemsPerPage >= Data.length || currentPage + itemsPerPage >= Data.length;
  const isFirstPage = currentPage === 0;

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

  return (
    <>
      <View style={[styles.mainView, { ...styleConfig?.Form }]}>
        <View style={[styles.HeaderView, { ...styleConfig?.Topbar }]}>
          <View>
            <CustomText
            fontStyle="semibold"
              style={[styles.HeaderText, { ...styleConfig?.Heading }]}
            >
              {title}
            </CustomText>
            <CustomText
              style={[styles.DescriptionText, { ...styleConfig?.Description }]}
            >
              {description}
            </CustomText>
          </View>
          <TouchableOpacity
            style={{
              backgroundColor: "#FBFBFB",
              padding: 4,
              borderRadius: 4,
            }}
          >
            <CrossIcon size={16} color="#939393" />
          </TouchableOpacity>
        </View>

        <ScrollView>
          <View style={{ gap: 16, paddingTop: 20 }}>
            {currentData?.map((item) => (
              <View key={item.actionId} style={{ paddingHorizontal: 20 }}>
                {/* text */}
                {item.actionType === "USER_INPUT_TEXT" && (
                  <View>
                    <CustomText
                    fontStyle="semibold"
                      style={[
                        styles.inputHeaderText,
                        { ...styleConfig?.Label },
                      ]}
                    >
                      {item.title}
                    </CustomText>

                    <View
                      style={[styles.inputMainView, { ...styleConfig?.Input }]}
                    >
                      <TextInput
                        placeholder={`${item.title}`}
                        placeholderTextColor={"#8E8E8E"}
                        style={styles.textInputInnerView}
                        onChangeText={(text) =>
                          updateCriteriaAnswer(item.actionId, [text])
                        }
                        value={
                          item.answer.length > 0 ? String(item.answer[0]) : ""
                        }
                      />
                    </View>
                  </View>
                )}

                {/* email */}
                {item.actionType === "USER_INPUT_EMAIL" && (
                  <View>
                    <CustomText
                    fontStyle="semibold"
                      style={[
                        styles.inputHeaderText,
                        { ...styleConfig?.Label },
                      ]}
                    >
                      {item.title}
                    </CustomText>

                    <View
                      style={[styles.inputMainView, { ...styleConfig?.Input }]}
                    >
                      <TextInput
                        placeholder={`${item.title}`}
                        placeholderTextColor={"#8E8E8E"}
                        style={styles.textInputInnerView}
                        keyboardType="email-address"
                        onChangeText={(text) =>
                          updateCriteriaAnswer(item.actionId, [text])
                        }
                        value={
                          item.answer.length > 0 ? String(item.answer[0]) : ""
                        }
                      />
                    </View>
                  </View>
                )}

                {/* text area */}
                {item.actionType === "USER_INPUT_TEXTAREA" && (
                  <View>
                    <CustomText
                    fontStyle="semibold"
                      style={[
                        styles.inputHeaderText,
                        { ...styleConfig?.Label },
                      ]}
                    >
                      {item.title}
                    </CustomText>

                    <View
                      style={[styles.inputMainView, { ...styleConfig?.Input }]}
                    >
                      <TextInput
                        editable
                        multiline
                        maxLength={120}
                        numberOfLines={4}
                        placeholder={`${item.title}`}
                        placeholderTextColor={"#8E8E8E"}
                        style={styles.textAreaInnerView}
                        onChangeText={(text) =>
                          updateCriteriaAnswer(item.actionId, [text])
                        }
                        value={
                          item.answer.length > 0 ? String(item.answer[0]) : ""
                        }
                      />
                    </View>
                  </View>
                )}

                {/* phone */}
                {item.actionType === "USER_INPUT_NUMBER" && (
                  <View>
                    <CustomText
                    fontStyle="semibold"
                      style={[
                        styles.inputHeaderText,
                        { ...styleConfig?.Label },
                      ]}
                    >
                      {item.title}
                    </CustomText>

                    <View
                      style={[styles.inputMainView, { ...styleConfig?.Input }]}
                    >
                      <TextInput
                        placeholder={`${item.title}`}
                        placeholderTextColor={"#8E8E8E"}
                        style={styles.textInputInnerView}
                        keyboardType="number-pad"
                        onChangeText={(text) =>
                          updateCriteriaAnswer(item.actionId, [text])
                        }
                        value={
                          item.answer.length > 0 ? String(item.answer[0]) : ""
                        }
                      />
                    </View>
                  </View>
                )}

                {/* rating */}
                {item.actionType === "RATING" && (
                  <View>
                    {ratingType === "emoji" && (
                      <EmojiRating
                        getCurrentRating={(number) => {
                          updateCriteriaAnswer(item.actionId, [number]);
                        }}
                        defaultRating={Number(item.answer[0])}
                      />
                    )}

                    {ratingType === "colored" && (
                      <ColoredRating
                        getCurrentRating={(number) => {
                          updateCriteriaAnswer(item.actionId, [number]);
                        }}
                        defaultRating={Number(item.answer[0])}
                      />
                    )}
                    {ratingType === "number" && (
                      <NumberRating
                        getCurrentRating={(number) => {
                          updateCriteriaAnswer(item.actionId, [number]);
                        }}
                        defaultRating={Number(item.answer[0])}
                      />
                    )}

                    {ratingType === "star" && (
                      <CustomRating
                        starColor="#FFDA45"
                        getCurrentRating={(number) =>
                          updateCriteriaAnswer(item.actionId, [number])
                        }
                        defaultRating={Number(item.answer[0])}
                      />
                    )}
                  </View>
                )}
                {/* single */}
                {item.actionType === "USER_INPUT_SINGLE_CHOICE" && (
                  <View>
                    <CustomText
                    fontStyle="semibold"
                      style={[
                        styles.inputHeaderText,
                        { ...styleConfig?.Label },
                      ]}
                    >
                      {item.title}
                    </CustomText>

                    <View style={{ flexDirection: "row", marginTop: 4 }}>
                      <RadioGroup
                        isFullWidth={false}
                        options={item?.options || []}
                        onSelect={(selectedItem) =>
                          updateCriteriaAnswer(item.actionId, [selectedItem])
                        }
                        selected={item.answer[0]}
                      />
                    </View>
                  </View>
                )}

                {/* multi */}
                {item.actionType === "USER_INPUT_MULTI_CHOICE" && (
                  <View>
                    <CustomText
                    fontStyle="semibold"
                      style={[
                        styles.inputHeaderText,
                        { ...styleConfig?.Label },
                      ]}
                    >
                      {item.title}
                    </CustomText>

                    <View style={{ flexDirection: "row", marginTop: 4 }}>
                      <Multiselect
                        option={item?.options || []}
                        onSelect={(selectedItem) =>
                          updateCriteriaAnswer(item.actionId, selectedItem)
                        }
                        selectItem={item.answer}
                      />
                    </View>
                  </View>
                )}
              </View>
            ))}
          </View>

          <View
            style={{
              flexDirection: "row",
              justifyContent: "space-between",
              alignItems: "center",
              padding: 20,
              gap: 12,
            }}
          >
            <TouchableOpacity
              style={[
                styles.previousButtonViewStyle,
                { ...styleConfig?.SecondaryButton },
              ]}
              onPress={prevPage}
              disabled={isFirstPage}
            >
              <CustomText
              fontStyle="semibold"
                style={[
                  {
                    color: "#2C2C2C",
                    fontSize: 14,
                    lineHeight: 20,
                    fontWeight: "500",
                    textAlign: "center",
                  },
                  { ...styleConfig?.SecondaryButton },
                ]}
              >
                Previous
              </CustomText>
            </TouchableOpacity>

            <LinearGradient
              colors={["#9035FF", "#0065FF"]}
              start={{ x: 0.1, y: 0 }}
              end={{ x: 1, y: 1 }}
              locations={[0.0036, 1]}
              style={[
                styles.getStartButtonViewStyle,
                { opacity: !validatePage() && !isLastPage ? 0.5 : 1 },
                ,
                { ...styleConfig?.PrimaryButton },
              ]}
            >
              <TouchableOpacity
                style={{
                  flex: 1,
                  justifyContent: "center",
                  alignItems: "center",
                  width: "100%",
                  paddingVertical: 13,
                }}
                onPress={isLastPage ? handleSubmit : nextPage}
                disabled={!validatePage() && !isLastPage}
              >
                {isLastPage ? (
                  submitLoading ? (
                    <ActivityIndicator size="small" color="white" />
                  ) : (
                    <CustomText fontStyle="semibold" style={{ color: "white" }}>Submit</CustomText>
                  )
                ) : (
                  <CustomText fontStyle="semibold" style={{ color: "white" }}>Next</CustomText>
                )}
              </TouchableOpacity>
            </LinearGradient>
          </View>
        </ScrollView>

        <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={handleCloseSuccess}
        >
          <View style={[styles.modalOutterViewStyle]}>
            <View style={[styles.successModalViewStyle]}>
              <View style={[styles.SuccessHeaderView]}>
                <TouchableOpacity
                  onPress={handleCloseSuccess}
                  style={{
                    backgroundColor: "#FBFBFB",
                    padding: 4,
                    borderRadius: 4,
                  }}
                >
                  <CrossIcon size={16} color="#939393" />
                </TouchableOpacity>
              </View>
              <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={handleCloseSuccess}
                  >
                    <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>
      )}
    </>
  );
}