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";

const DownloadDataModal = (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=((dc/tc)*100);
  
  const bar_width=p>p?'100%':p+'%';

  let showProgresssBar=(props.showProgresssBar!=null && props.showProgresssBar!='')?props.showProgresssBar:(props.showProgresssBar===false?false:true);
  
  // 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.download_Title}>{props.title}</Text>}
        {(props.downloadCount!=null && props.totalCount!=null) && props.hideCounter!=true && showProgresssBar && <Text style={customStyle.download_count}>{(dc+1)+'/'+(tc+1)}</Text>}
        {(props.downloadCount!=null && props.totalCount!=null &&  showProgresssBar)  && 
        <View style={customStyle.downloadProgress}>
          <View style={customStyle.downloadProgress_bg}></View>
          <Animated.View style={[customStyle.downloadProgress_filled,{width:bar_width}]}></Animated.View>
        </View>
        }  
        {(props.subtitle!=null)  && <Text style={[customStyle.download_subTitle,(props.subTextStyle!=null && props.subTextStyle!=''?props.subTextStyle:{})]}>{props.subtitle}</Text>}
        {(props.showOkButton!=true) && <ActivityIndicator size={'small'} color={PageTheme.$primary_color} style={customStyle.downloadModal_spin}/>}
       
        {(props.showOkButton==true && props.OnOKClick!=null) && 
          <View style={customStyle.downloadModal_btnWrap}>
          <TouchableOpacity  style={customStyle.downloadModal_OkBtn} onPress={()=>{props.OnOKClick()}}>
            <Text style={customStyle.downloadModal_OkBtnText}>Ok</Text>
          </TouchableOpacity>
          </View>
        }
      </View>
    </View>
  );
};
export default DownloadDataModal;