import React, { Component } from 'react'
import {View, Dimensions, StyleSheet,ActivityIndicator,Modal,TouchableOpacity} from 'react-native';
import {colors} from '../assets/styles/colors-theme';
import LottieView from 'lottie-react-native';
import { inject, observer } from "mobx-react"
import { observable, makeObservable } from 'mobx'
const { width, height } = Dimensions.get('window')
const CheckAnimate = inject("appStore")(observer(class CheckAnimate extends React.Component {


  constructor(props) {
    super(props);
    this.store = props.appStore;
  }

  render(){
    return (
      <Modal
        transparent={true}
        animationType={'none'}
        visible={this.props.visible}
        onRequestClose={() => {console.log('c lose modal')}}>
        <View style={styles.modalBackground}>
        <LottieView style = {{height:100,width:100}} source={require('../assets/lottie/782-check-mark-success')} progress={this.props.progress} />
        </View>
      </Modal>
    )
  }
  
}

))

const styles = StyleSheet.flatten({
  wrapper: {
    position: 'absolute',
    top: 0,
    left: 0,
    width: width,
    height: height,
    backgroundColor: 'rgba(0, 0, 0, 0.2)'
  },
  loading:{
    position: 'absolute',
    top: height / 2 - 100,
    left: width / 2 - 70,
    width: 140,
    height: 140
  },
  modalBackground: {
    flex: 1,
    alignItems: 'center',
    flexDirection: 'column',
    justifyContent: 'center',
    //backgroundColor: '#00000040'
  },
  activityIndicatorWrapper: {
    backgroundColor: '#FFFFFF',
    height: 100,
    width: 100,
    borderRadius: 10,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-around'
  }
});

export default CheckAnimate