import {
  View,
  Text,
  TouchableOpacity,
  ScrollView,
  ActivityIndicator,
  Modal,
  Image,
} from "react-native";
import React, { useEffect, useState } from "react";
import { ITopThree, Props } from "./Leaderboard.type";
import { styles } from "./Leaderboard.styles";
import ThirdIcon from "../../assets/ReactSVG/ThirdIcon";
import FirstIcon from "../../assets/ReactSVG/FirstIcon";
import SecoundIcon from "../../assets/ReactSVG/SecoundIcon";
import LeaderBoardCard from "./LeaderBoardCard";
import QuestIcon from "../../assets/ReactSVG/QuestIcon";
import { LinearGradient } from "expo-linear-gradient";
import CustomText from "../../common/CustomText";

export default function Leaderboard({
  loading,
  leadersData,
  // style,
  cardDescription,
  cardTitle,
  header,
  styleConfig,
  isModal,
}: Props) {
  const [modalVisible, setModalVisible] = useState(true);

  const [first, setFirst] = useState<ITopThree>();
  const [second, setSecond] = useState<ITopThree>();
  const [third, setThird] = useState<ITopThree>();
  const [rest, setRest] = useState<ITopThree[]>([]);

  useEffect(() => {
    leadersData.sort((a, b) => b.runningXP - a.runningXP);
    const dataLength = leadersData.length;

    if (dataLength > 0) {
      setFirst(leadersData[0]);
    }

    if (dataLength > 1) {
      setSecond(leadersData[1]);
    }
    if (dataLength > 2) {
      setThird(leadersData[2]);
      setRest(leadersData.slice(3));
    } else {
      setRest([]);
    }
  }, [leadersData]);

  const RenderComponent = () =>{
    return (
      <View style={[styles.mainModalContainer]}>
      <LinearGradient
        colors={["rgba(255, 255, 255, 0)", "#9035FF", "#0065FF"]}
        start={{ x: 0, y: 1 }}
        end={{ x: 0.6, y: 0 }}
        locations={[0.3824, 0.5939, 0.707]}
        style={[styles.mainViewStyle, { ...styleConfig?.Form }]}
      >
        <View>
          <CustomText
          fontStyle="semibold"
            style={[
              styles.headerTextStyle,
              { ...styleConfig?.MainHeading },
            ]}
          >
            {header ? header : "Leaderboard"}
          </CustomText>
          <View>
            <View style={{ marginTop: 40 }}>
              <View style={styles.TopThreeContainer}>
                {third && (
                  <View style={[styles.RunnerUpViewStyle]}>
                    <Image
                      style={[styles.RunnerUpImageView]}
                      source={
                        third?.imageUrl?.includes("http")
                          ? { uri: third.imageUrl }
                          : require("../../assets/UserDemo.png")
                      }
                    />
                    <View
                      style={{
                        justifyContent: "flex-end",
                        marginTop: 52,
                        width: 60,
                        height: 48,
                      }}
                    >
                      <CustomText
                      fontStyle="semibold"
                        style={[
                          styles.RunnerUpTitleStyle,
                          { ...styleConfig?.MainHeading },
                        ]}
                      >
                        {third.name ? third.name : "Unknown-User"}
                      </CustomText>
                    </View>
                    <View
                      style={[
                        styles.RunnerUpPointsStyle,
                        { ...styleConfig?.PointsBackground },
                      ]}
                    >
                      <CustomText
                        style={[
                          styles.RunnerUpPointsTextStyle,
                          { ...styleConfig?.PointsColor },
                        ]}
                      >
                        {third.runningXP} points
                      </CustomText>
                    </View>
                    <View style={{ marginTop: 24, marginBottom: 40 }}>
                      <ThirdIcon />
                    </View>
                  </View>
                )}
                {first && (
                  <View style={[styles.RunnerUpViewStyle]}>
                    <Image
                      style={[styles.TopFirstImageView]}
                      source={
                        first?.imageUrl?.includes("http")
                          ? { uri: first.imageUrl }
                          : require("../../assets/UserDemo.png")
                      }
                    />
                    <View
                      style={{
                        justifyContent: "flex-end",
                        marginTop: 60,
                        width: 60,
                        height: 48,
                      }}
                    >
                      <CustomText
                      fontStyle="semibold"
                        style={[
                          styles.RunnerUpTitleStyle,
                          { ...styleConfig?.MainHeading },
                        ]}
                      >
                        {first.name ? first.name : "Unknown-User"}
                      </CustomText>
                    </View>
                    <View
                      style={[
                        styles.RunnerUpPointsStyle,
                        { ...styleConfig?.PointsBackground },
                      ]}
                    >
                      <CustomText
                        // numberOfLines={1}
                        style={[
                          styles.RunnerUpPointsTextStyle,
                          { ...styleConfig?.PointsColor },
                        ]}
                      >
                        {first.runningXP} points
                      </CustomText>
                    </View>
                    <View style={{ marginTop: 20, marginBottom: 28 }}>
                      <FirstIcon />
                    </View>
                  </View>
                )}
                {second && (
                  <View style={[styles.RunnerUpViewStyle]}>
                    <Image
                      style={[styles.RunnerUpImageView]}
                      source={
                        second?.imageUrl?.includes("http")
                          ? { uri: second.imageUrl }
                          : require("../../assets/UserDemo.png")
                      }
                    />
                    <View
                      style={{
                        justifyContent: "flex-end",
                        marginTop: 52,
                        width: 60,
                        height: 48,
                      }}
                    >
                      <CustomText
                      fontStyle="semibold"
                        attributes={{ numberOfLines: 2 }}
                        style={[
                          styles.RunnerUpTitleStyle,
                          { ...styleConfig?.MainHeading },
                        ]}
                      >
                        {second.name ? second.name : "Unknown-User"}
                      </CustomText>
                    </View>
                    <View
                      style={[
                        styles.RunnerUpPointsStyle,
                        { ...styleConfig?.PointsBackground },
                      ]}
                    >
                      <CustomText
                        style={[
                          styles.RunnerUpPointsTextStyle,
                          { ...styleConfig?.PointsColor },
                        ]}
                      >
                        {second.runningXP} points
                      </CustomText>
                    </View>
                    <View style={{ marginTop: 24, marginBottom: 40 }}>
                      <SecoundIcon />
                    </View>
                  </View>
                )}
              </View>

              <View style={{ alignItems: "center" }}>
                <View
                  style={[
                    styles.questionBackgroundViewStyle,
                    { ...styleConfig?.InnerBackground },
                  ]}
                >
                  <CustomText
                  fontStyle="semibold"
                    style={[
                      styles.questionHeaderTextStyle,
                      { ...styleConfig?.Heading },
                    ]}
                  >
                    {cardTitle ? cardTitle : " Leaderboard"}
                  </CustomText>
                  <CustomText
                    style={[
                      styles.questionDescriptionTextStyle,
                      { ...styleConfig?.Description },
                    ]}
                  >
                    {cardDescription
                      ? cardDescription
                      : "Your leaderboard gives you instant reference"}
                  </CustomText>

                  {/* Loading Indicator */}
                  {loading && (
                    <View style={styles.loadingMainView}>
                      <ActivityIndicator size="large" color="#545454" />
                      <CustomText>Loading...</CustomText>
                    </View>
                  )}

                  {rest && (
                    <ScrollView>
                      {rest.map((item, index) => (
                        <LeaderBoardCard
                          key={index}
                          item={item}
                          index={index}
                          styleConfig={styleConfig}
                        />
                      ))}
                    </ScrollView>
                  )}
                </View>
              </View>
            </View>
          </View>

          {/* footer */}
          <View style={{ marginTop: "auto", justifyContent: "flex-end" }}>
            <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>
        </View>
      </LinearGradient>
    </View>
    )
  }
  if(isModal){
    return (
      <View style={{ flex: 1 }}>
        
        <Modal
          visible={modalVisible}
          animationType="slide"
          transparent={true}
          onRequestClose={() => setModalVisible(false)}
        >
          <RenderComponent/>
        </Modal>
      </View>
    );
  }
  else{
    return(

      <RenderComponent/>
    )
  }
 
}