import React, {Component} from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Modal,
  ActivityIndicator,
} from 'react-native';
import Spinner from 'react-native-loading-spinner-overlay';
import {colors} from '../assets/styles/colors-theme';
import LottieView from 'lottie-react-native';
import {width, height} from '../services/screen';

export default class Loading extends Component {
  state = {
    spinner: false,
  };

  render() {
    return (
      <Modal
        transparent={true}
        animationType={'none'}
        visible={this.props.loading}
        onRequestClose={() => {
          console.log('c lose modal');
        }}>
        <View style={styles.modalBackground}>
          <View style={styles.activityIndicatorWrapper}>
            {/* <ActivityIndicator animating={this.props.loading} /> */}
            <LottieView
              ref={animation => {
                this.animation = animation;
              }}
              colorFilters={[
                {
                  keypath: 'Left',
                  color: colors.mainColor,
                },
                {
                  keypath: 'Center',
                  color: colors.mainColor,
                },
                {
                  keypath: 'Rigth',
                  color: colors.mainColor,
                },
              ]}
              style={{height: 150, width: 150}}
              source={require('../assets/lottie/loading')}
              autoPlay
              loop
            />
          </View>
        </View>
      </Modal>
    );
  }
}

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