import {
  ActivityIndicator,
  Image,
  SafeAreaView,
  Text,
  View,
} from "react-native";
import React from "react";
import { Props } from "./Streak.types";
import { styles } from "./Streak.styles";
import FireIconSvg from "../../assets/ReactSVG/FireIconSvg";
import SmallCircle from "../../assets/ReactSVG/SmallCircle";
import SmallGiftIcon from "../../assets/ReactSVG/SmallGiftIcon";
import SmallGiftIconUnfill from "../../assets/ReactSVG/SmallGiftIconUnfill";
import QuestIcon from "../../assets/ReactSVG/QuestIcon";
import CustomText from "../../common/CustomText";
export default function Streak({
  iconData,
  icon,
  counter,
  description,
  header,
  loading,
  styleConfig,
  filledStreakImg,
  pendingStreakImg,
}: Props) {
  if (loading) {
    return (
      <SafeAreaView style={styles.loadingMainView}>
        <ActivityIndicator size="large" color="#545454" />
        <CustomText>Loading...</CustomText>
      </SafeAreaView>
    );
  }
  return (
    <View style={[styles.mainViewStyle, { ...styleConfig?.Form }]}>
      <View style={styles.headerViewStyle}>
        <CustomText fontStyle="semibold" style={[styles.headerNumberStyle, { ...styleConfig?.Count }]}>
          {counter ? counter : 0}
        </CustomText>
        <CustomText fontStyle="semibold" style={[styles.headerTextStyle, { ...styleConfig?.Heading }]}>
          {header ? header : "Streak days"}
        </CustomText>
      </View>

      <View style={{ marginTop: 20 }}>
        <CustomText
          style={[styles.descriptionTextStyle, { ...styleConfig?.Description }]}
        >
          {description
            ? description
            : "This is the longest streak you’ve ever had"}
        </CustomText>
      </View>

      <View style={styles.iconViewStyle}>
        {iconData.map((item, index) => (
          <View key={index} style={{ paddingBottom: 5 }}>
            <View
              style={[
                styles.iconBackGroundViewStyle,
                { ...styleConfig?.IconBackground },
              ]}
            >
              {filledStreakImg &&
              pendingStreakImg &&
              (filledStreakImg.startsWith("https://") ||
                pendingStreakImg.startsWith("https://")) ? (
                <>
                  {item.range <= counter ? (
                    <Image
                      style={[styles.imageStyle]}
                      source={{ uri: filledStreakImg }}
                    />
                  ) : (
                    <Image
                      style={[styles.imageStyle]}
                      source={{ uri: pendingStreakImg }}
                    />
                  )}
                </>
              ) : icon === "gift" ? (
                item.range <= counter ? (
                  <SmallGiftIcon />
                ) : (
                  <SmallGiftIconUnfill />
                )
              ) : (
                icon === "fire" && (
                  <FireIconSvg
                    fill={
                      item.range <= counter
                        ? styleConfig?.IconColor?.color
                          ? styleConfig?.IconColor?.color
                          : "#9035FF"
                        : "#B9B9B9"
                    }
                  />
                )
              )}
            </View>
            <CustomText
              attributes={{ numberOfLines: 1 }}
           
              style={[
                styles.iconTextStyle,
                { color: item.range <= counter ? "#2C2C2C" : "#B9B9B9" },
              ]}
            >
              {item.title}
            </CustomText>

            <View style={{ alignItems: "center", marginTop: 12 }}>
              <SmallCircle
                fill={item.range <= counter ? "#9035FF" : "#B9B9B9"}
              />
            </View>
          </View>
        ))}
      </View>

      <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>
  );
}