import React,{useRef,useEffect} from "react";
import { Text, TouchableOpacity ,View,Image,Animated,ActivityIndicator,StatusBar} from "react-native";
import { customeButtons,GetPageTheme,customStyles,globalStyles,HP } from "../styles/Global";
import { useRoute } from '@react-navigation/native';
import { AntDesign } from "./icons";

// import LoadingSVG from '../assets/image/loader.svg'
// import { SvgXml } from "react-native-svg";
// import { heightPercentageToDP } from "react-native-responsive-screen";

const DownloadAPKModal = (props) => {
  const route = useRoute();
  const PageTheme=GetPageTheme(props.DarkTheme,route.name);
  const globalStyle=globalStyles(props.DarkMode,route.name);
  const customStyle=customStyles(props.DarkMode,route.name);

  const downloadAnimated = useRef(new Animated.Value(0)).current;

  const htStyle={height:HP('100%')+StatusBar.currentHeight};
  let dc=props.downloadCount;
  let tc=props.totalCount;
  let p=tc==0?0:((dc/tc)*100);
  
  const bar_width=(p=='Infinity')?'0%':(p>100?'100%':p+'%');

  // downloadAnimated.setValue(0);
  // Animated.timing(downloadAnimated, {
  //     toValue: 1,
  //     duration:100,
  //     useNativeDriver:false,  
  // }).start();
  // let prev_dc=dc<1?dc-1:dc;
  // const bar_width=downloadAnimated.interpolate({
  //     inputRange:[prev_dc,dc],
  //     outputRange:[((prev_dc/tc)*100)+'%',((dc/tc)*100)+'%'], 
  // });
  
  return (
    <View style={[customStyle.loaderBackdrop]}>      
      <View style={customStyle.download_loaderCon}>
        {(props.title!=null) && <Text style={customStyle.downloadAPk_Title}>{props.title}</Text>}
        {(props.downloadCount!=null && props.totalCount!=null) && props.hideCounter!=true && <Text style={customStyle.download_count}>{(dc+1)+'/'+(tc+1)}</Text>}
        
        <View style={customStyle.downloadAPkProgress}>
          <Image source={require('../assets/image/loader.gif')} style={customStyle.downloadAPkProgress_gif} />
        </View>
        {props.subtitle!=null && 
          <View style={customStyle.downloadAPk_subtitleWrap}>
          {<ActivityIndicator size={'small'} color={PageTheme.$primary_color} style={customStyle.downloadAPKModal_spin}/>}
          {(props.subtitle!=null) && <Text style={customStyle.downloadAPk_subTitle}>{props.subtitle}</Text>}
          </View>
        }
      </View>
    </View>
  );
};
export default DownloadAPKModal;