import {
  View,
  Text,
  TextInput,
  Linking,
  ScrollView,
  TouchableOpacity,
 
} from "react-native";
import React, { useContext, useEffect, useState } from "react";
import { styles } from "./HelpHub.styles";
import { HelpHubTasksTypes, QuestCriteriaWithStatusType } from "./HelpHub.types";
import CrossIcon from "../../assets/ReactSVG/CrossIcon";
import SearchIcon from "../../assets/ReactSVG/SearchIcon";
import { useQuestNotification } from "../../hooks";
import OnlyRightIcon from "../../assets/ReactSVG/OnlyRightIcon";
import TimeIcon from "../../assets/ReactSVG/TimeIcon";
import { QuestContext } from "../../context/QuestContext";
import config from "../../common/config";
import { claimQuest } from "../../components/HelpHub/Helphub.service";

const TaskTabScreen = (props: HelpHubTasksTypes) => {

  const {
    tasksData,
    questId,
    userId,
    token,
    contentConfig,
    styleConfig,
  } = props

  const { apiKey, apiSecret, entityId } = useContext(QuestContext);
  const [filterData, setFilterData] = useState<QuestCriteriaWithStatusType[]>([]);
  const [claimStatus, setClaimStatus] = useState<string[]>([]);
  const [searchQuery, setSearchQuery] = useState("");
  const { error, success } = useQuestNotification();

  let BACKEND_URL = config.BACKEND_URL

  useEffect(() => {
    let data = tasksData.filter((value: QuestCriteriaWithStatusType) => {
      return value?.data?.metadata?.linkActionName?.toLowerCase().includes(searchQuery?.toString().toLowerCase())
    })
    setFilterData(data);
  }, [tasksData, searchQuery])

  useEffect(() => {
    let arr = tasksData.filter((ele: QuestCriteriaWithStatusType) => ele.completed === true).map((ele: QuestCriteriaWithStatusType) => ele.data.criteriaId)
    setClaimStatus(arr)
  }, [tasksData])


  const readUpdate = async (criteriaId: string, linkActionUrl?: string,completed?:boolean) => {
    if (completed) {
      return;
    }
    if (!linkActionUrl) {
      // Handle the case where linkActionUrl is undefined
      return;
    }
    if (await Linking.canOpenURL(linkActionUrl)) {
      Linking.openURL(linkActionUrl);
      let claimResponse = await claimQuest(BACKEND_URL, entityId, questId, userId, token, apiKey, criteriaId)
      if (claimResponse.success) {
        setClaimStatus([...claimStatus, criteriaId]);
      }
    }
  }


  const handleSearch = (text) => {
    setSearchQuery(text);
  };

  const renderCriteria = (ele: QuestCriteriaWithStatusType, index: number) => {
    return (
      <View style={[styles.tasksCardView]} key={index}>
        <Text
          style={[styles.tasksStepTextStyle,styleConfig?.Tasks?.tasksStepTextStyle]}
        >
          STEP {index + 1}
        </Text>
        <View style={{ flexDirection: "row", alignItems: "center" }}>
          <TouchableOpacity
            style={{ flex: 1 }}
            onPress={() => readUpdate(ele?.data?.criteriaId, ele?.data?.metadata?.linkActionUrl,ele?.completed)}
          >
            <Text style={[styles.tasksCardHeaderText,styleConfig?.Tasks?.Card?.Heading]}>{ele?.data?.metadata?.linkActionName}</Text>
            <Text style={[styles.tasksCardDesciptionText,styleConfig?.Tasks?.Card?.SubHeading]}>
              {ele?.data?.metadata?.description}
            </Text>
          </TouchableOpacity>
          <View style={{ marginLeft: 12 }}>
            {!claimStatus?.includes(ele?.data?.criteriaId)  ? (
              <View>
                <TimeIcon />
              </View>
            ) : (
              <View style={[styles.rightIconView]}>
                <OnlyRightIcon />
              </View>
            )}
          </View>
        </View>
      </View>
    );
  };

  return (
    <View
      style={[styles.tasksMainViewStyle,styleConfig?.Tasks?.Form]}
    >
      {/* Header */}
      <View
        style={[styles.tasksHeaderViewStyle]}
      >
        <View
          style={[styles.tasksHeaderInnerViewStyle]}
        >
          <Text
            style={[styles.tasksHeaderTextStyle,styleConfig?.Tasks?.Topbar?.Heading]}
          >
            {contentConfig?.heading || "Tasks"}
          </Text>
          <CrossIcon size={10} color="#939393" />
        </View>
        <Text
          style={[styles.tasksHeaderDescriptionStyle,,styleConfig?.Tasks?.Topbar?.SubHeading]}
        >
          {contentConfig?.subHeading || "Welcome back, Please talk to us to understand"}

        </Text>
      </View>
      {/* List items */}
      <View style={[styles.tasksTabListViewStyle]}>
        {/* Search bar */}
        <View style={[styles.searchViewStyle,styleConfig?.Tasks?.Searchbox]}>
          <TextInput
            style={[styles.inputViewStyle]}
            onChangeText={handleSearch}
            
            placeholder="Search for Tasks..."
          />
          <SearchIcon />
        </View>

        {/* Progress bar */}
        <View>
          <Text style={[styles.progressBarTextStyle]}>
          {Math.ceil(100 * (claimStatus?.length / tasksData?.length)) || 0}% Completed
          </Text>
          <View style={[styles.progressBar]}>
            <View
              style={[styles.progressBarInnerStyle, { width: `${100 * (claimStatus?.length / tasksData?.length)}%` }]}
            />
          </View>
        </View>

      


        <View style={[styles.tasksListInnerCardView]}>
          <ScrollView >
            {filterData.map(renderCriteria)}
          </ScrollView>
        </View>


      </View>
    </View>
  );
};

export default TaskTabScreen;