import {
  View,
  Text,
  TextInput,
  ScrollView,
  Image,
  TouchableOpacity,
  ActivityIndicator,
} from "react-native";
import React, { useContext, useEffect, useState } from "react";
import QuestIcon from "../../assets/ReactSVG/QuestIcon";
import { styles } from "./HelpHub.styles";
import DownArrow from "../../assets/ReactSVG/DownArrow";
import ComponentDemo from "../../assets/ReactSVG/ComponentDemo";
import SearchIcon from "../../assets/ReactSVG/SearchIcon";
import EmojiRating from "../../components/EmojiRating/EmojiRating";
import { HelpHubHomeTypes, QuestCriteriaWithStatusType } from "../../components/HelpHub/HelpHub.types";
import { QuestContext } from "../../context/QuestContext";
import config from "../../common/config";
import { useQuestNotification } from "../../hooks";
import { claimQuest } from "../../components/HelpHub/Helphub.service";
import { SafeAreaView } from "react-native";

const HomeTabScreen = (props: HelpHubHomeTypes) => {
  const {
    questsData,
    setSelectedSection,
    parentQuest,
    styleConfig,
    userId,
    token,
    contentConfig,
  } = props;

  const { apiKey, apiSecret, entityId } = useContext(QuestContext);
  let BACKEND_URL = config.BACKEND_URL
  const { error, success } = useQuestNotification();

  const [allQuestsData, setAllQuestsData] = useState<QuestCriteriaWithStatusType[][]>([]);
  const [filteredData, setFilteredData] = useState<QuestCriteriaWithStatusType[][]>([]);
  const [searchQuery, setSearchQuery] = useState("");

  let [showFeedback, setShowFeedback] = useState<boolean>(false);
  let [feedbackLoading, setFeedbackLoading] = useState<boolean>(false);
  const [taskStatus, setTaskStatus] = useState<number>(0);

  useEffect(() => {
    setAllQuestsData(questsData);
    setFilteredData(questsData)
    let arr =
      (!!questsData?.length &&
        questsData[3]
          ?.filter(
            (ele: QuestCriteriaWithStatusType) =>
              ele.completed === true
          )
          .map(
            (ele: QuestCriteriaWithStatusType) =>
              ele.data.criteriaId
          )) ||
      [];
    setTaskStatus(
      Math.ceil(
        100 *
        (arr?.length /
          (!!questsData?.length ? questsData[3]?.length : 0))
      ) || 0
    );
    setShowFeedback(
      !!questsData?.length &&
      !!questsData[0][0] &&
      questsData[0][0]?.completed == false
    );
  }, [questsData]);




  const submitQuest = async (answer: number) => {
    setFeedbackLoading(true);

    try {
      let claimResponse = await claimQuest(
        BACKEND_URL,
        entityId,
        parentQuest?.childQuestIDs[0] || "",
        userId || "",
        token || "",
        apiKey,
        allQuestsData[0][0]?.data?.criteriaId,
        [answer]
      );
      setFeedbackLoading(false);
      if (claimResponse?.success) {
        success("Feedback share Successfully")
        setShowFeedback(false);
      }
    } catch (error) {
      error("Somthing Wrong",error)
    }
   
  };


  const handleSearch = (query: string) => {
    setSearchQuery(query);
    const filtered = allQuestsData.map(section =>
      section.filter(quest =>
        quest?.data?.metadata?.question?.toLowerCase().includes(query.toLowerCase())
      )
    );
    setFilteredData(filtered);
  };

  return (
    <ScrollView style={[styleConfig?.Home?.Form,{flex: 1 }]}>
     
      {/* Header Image */}
      <View
        style={[styles.homeHeaderViewStyle]}
      >
        <View
          style={[styles.homeHeaderIconViewStyle]}
        >
          <QuestIcon />
        </View>
        <Image
          style={[styles.homeheaderImageStyle]}
          source={require("../../assets/UserDemo.png")}
        />
      </View>

      {/* Header TItle */}

      <View style={[styles.homeHeaderTextViewStyle]}>
        <Text style={[styles.headerTextStyle,styleConfig?.Home?.Heading]}>
          {contentConfig?.heading || "Hello there"}
        </Text>
      
          <Text style={[styles.headerTextStyle,styleConfig?.Home?.SubHeading]}>How can we help?</Text>
      
      </View>

      <View style={[styles.homeListViewStlye]}>
        {/* Send Message */}
        <View
          style={[styles.sendMessageViewStyle,styleConfig?.Home?.sendMessageViewStyle]}
        >
          <TouchableOpacity
            onPress={() => setSelectedSection("Chat")}
            style={[styles.sendMessageInnerViewStyle]}
          >
            <View style={{ gap: 4 }}>
              <Text
                style={[styles.sendMessageTitleStyle,styleConfig?.Home?.sendMessageTitleStyle]}
              >
                {contentConfig?.chatButton?.heading ||
                  "Send us a message"}
              </Text>
              <Text
                style={[styles.sendMessageDescriptionStyle,styleConfig?.Home?.sendMessageDescriptionStyle]}
              >
                {contentConfig?.chatButton?.subHeading ||
                  "See how your customer service solution works"}
              </Text>
            </View>
            <View style={{ transform: [{ rotate: "270deg" }] }}>
              <DownArrow fill="#B9B9B9" />
            </View>
          </TouchableOpacity>
        </View>

        {/* Community */}
        <View
          style={[styles.communityMainViewStyle,styleConfig?.Home?.communityMainViewStyle]}
        >
          <View
            style={[styles.communityDemoViewStyle,styleConfig?.Home?.communityDemoViewStyle]}
          >
            {contentConfig?.box1?.image ?
              <Image source={{ uri: contentConfig?.box1?.image }} />
              : <ComponentDemo />
            }


          </View>

          <View style={[styles.communityInnerViewStyle]}>
            <Text
              style={[styles.communityTitleStyle,styleConfig?.Home?.communityTitleStyle]}
            >

              {contentConfig?.box1?.heading ||
                "The Questlabs community"}
            </Text>
            <Text
              style={[styles.communityDescriptionStyle,styleConfig?.Home?.communityDescriptionStyle]}
            >
              {contentConfig?.box1?.subHeading ||
                "Be sure to check out the Quest labs community for support, plus tips & tricks from Quest users and much more coming soon"}
            </Text>
          </View>
        </View>

        {/* Search Bar */}
        <View
          style={[styles.searchMainViewStyle,styleConfig?.Home?.searchMainViewStyle]}
        >
          <View style={[styles.searchViewStyle,styleConfig?.Home?.searchViewStyle]}>
            <TextInput
              style={[styles.inputViewStyle]}
              onChangeText={handleSearch}
              value={searchQuery}
              placeholder="Search"
            />
            <SearchIcon />
          </View>

          <ScrollView>
          {!!filteredData?.length &&
            filteredData[1]?.map((value: QuestCriteriaWithStatusType, index: number) => (
              <TouchableOpacity
                key={index}
                onPress={() => setSelectedSection("Help")}
                style={styles.searchListViewStyle}
              >
                <Text style={[styles.searchListItemTitleStyle,styleConfig?.Home?.searchListItemTitleStyle]}>
                  {value?.data?.metadata?.question}
                </Text>
                <View style={{ transform: [{ rotate: "270deg" }] }}>
                  <DownArrow fill="#B9B9B9" />
                </View>
              </TouchableOpacity>
            ))}
            </ScrollView>



        </View>

        {/* Get Updated */}
        <View
          style={[styles.getupdateMainViewStlye,styleConfig?.Home?.getupdateMainViewStlye]}
        >
          <Text
            style={[styles.getupdateHeaderTextStyle,styleConfig?.Home?.getupdateHeaderTextStyle]}
          >
            Get Updates
          </Text>

          {!!allQuestsData?.length &&
            allQuestsData[2]?.map(
              (
                value: QuestCriteriaWithStatusType,
                index: number
              ) =>
                index < 2 && (
                  <View key={index}>
                    <Text
                      style={[index < 1 ? [styles.getupdateTitleStyle,styleConfig?.Home?.getupdateTitleStyle] : [styles.getupdateTitle2Style,styleConfig?.Home?.getupdateTitle2Style]]}
                    >
                      {
                        value?.data
                          ?.metadata
                          ?.linkActionName
                      }
                    </Text>
                    <Text
                      numberOfLines={2}
                      style={[index < 1 ? [styles.getupdateDescriptionStyle,styleConfig?.Home?.getupdateDescriptionStyle] : [styles.getupdateDescription2Style,styleConfig?.Home?.getupdateDescription2Style]]}

                    >
                      {
                        value?.data
                          ?.metadata
                          ?.description
                      }
                    </Text>
                  </View>)
            )}




          <TouchableOpacity
            onPress={() => setSelectedSection("Updates")}
            style={[styles.getupdateButtonStyle,styleConfig?.Home?.getupdateButtonStyle]}
          >
            <Text
              style={[styles.getupdateButtonTextStyle,styleConfig?.Home?.getupdateButtonTextStyle]}
            >
              See all updates
            </Text>
          </TouchableOpacity>
        </View>

        {/* Complate your profile */}
        <TouchableOpacity
          onPress={() => setSelectedSection('Tasks')}
          style={[styles.complateProfileView,styleConfig?.Home?.complateProfileView]}
        >
          <TouchableOpacity
            style={[styles.complateProfileHeaderViewStyle]}
          >
            <Text
              style={[styles.complateProfileHeaderTextStyle,styleConfig?.Home?.complateProfileHeaderTextStyle]}
            >
              {contentConfig?.box4?.heading ||
                "Complete your profile"}
            </Text>
            <View style={{ transform: [{ rotate: "270deg" }] }}>
              <DownArrow fill="#B9B9B9" />
            </View>
          </TouchableOpacity>
          <Text
            style={[styles.complateProfileDescriptionStyle,styleConfig?.Home?.complateProfileDescriptionStyle]}
          >
            {contentConfig?.box4?.subHeading ||
              "Be sure to check out the Quest labs community for support, plus tips & tricks from Quest users"}

          </Text>

          {/* Progress bar */}
          <View style={{ paddingTop: 20 }}>
            <Text style={[styles.progressBarTextStyle]}>{taskStatus}% Completed</Text>
            <View style={[styles.progressBar]}>
              <View
                style={[styles.progressBarInnerStyle, { width: `${taskStatus}%` }]}
              />
            </View>
          </View>
        </TouchableOpacity>

        {/* Satisfied */}
        {showFeedback && ( <View
          style={[styles.satisfiedMainViewStyle,styleConfig?.Home?.satisfiedMainViewStyle]}
        >
          <View
            style={{
              padding: 20,
            }}
          >
            <Text
              style={[styles.satisfiedTitleStyle,styleConfig?.Home?.satisfiedTitleStyle]}
            >
              {contentConfig?.box5?.heading ||
                "How satisfied are you?"}
            </Text>

            <Text
              style={[styles.satisfiedDescriptionStyle,styleConfig?.Home?.satisfiedDescriptionStyle]}
            >
              {contentConfig?.box5?.subHeading ||
                "How would you rate this journey after using the product after so long?"}
            </Text>
          </View>

          <EmojiRating
            type="emoji"
            count={5}
            getCurrentRating={submitQuest}
          />
          <View
            style={[styles.satisfiedFooterViewStyle]}
          >
            <Text
              style={[styles.satisfiedFooterTextStyle,styleConfig?.Home?.satisfiedFooterTextStyle]}
            >
              Not satisfied
            </Text>
            <Text
              style={[styles.satisfiedFooterTextStyle,styleConfig?.Home?.satisfiedFooterTextStyle]}
            >
              Very satisfied
            </Text>
          </View>
          {feedbackLoading && (
            <SafeAreaView style={styles.loadingMainView}>
              <ActivityIndicator size="small" color="#545454" />
              <Text>Loading...</Text>
            </SafeAreaView>
          )}
        </View>)}
       
      </View>
    
    </ScrollView>
  );
};

export default HomeTabScreen;