import React, { PureComponent } from 'react';
import {  View, Text, Animated, StyleSheet, Modal } from 'react-native';
import { CL_ORANGE, CL_MODALOVERLAY, CL_W, CL_RED, CL_BLUE } from 'styles/common';
import { IcAnalyze } from 'components/svg';

class LoadAnimated extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      loadingOpacity: new Animated.Value(0)
    }
  }

  componentDidMount() {
      this._fadeAnimation();
  }

  render() {
    const { show, visible } = this.props;
    return (
      <Modal transparent onRequestClose={() => {}} visible={visible}>
      <View style={styles.loading}>
      <View style={[styles.containerView]}>
        {this._test()}
        {/* <Animated.View style={show ? styles.outerCircle60 : styles.outerCircle60} />
        <View style={{position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, justifyContent: 'center', alignItems: 'center'}}>
          <IcAnalyze />
        </View> */}
      </View>
        <View style={styles.textLoadWrap}>
          <Text style={styles.loadingText}>Sedang melakukan</Text>
          <Text style={styles.loadingText}>verifikasi…</Text>
        </View>
      </View>
    </Modal>
    );
  }

  _fadeAnimation = () => {
    const {loadingOpacity} = this.state;
    loadingOpacity.setValue(0);
    Animated.sequence([
        Animated.timing(
            loadingOpacity,
            {
                toValue: 1,
                duration: 500
            }
        ),
        Animated.timing(
            loadingOpacity,
            {
                toValue: 0,
                duration: 500
            }
        )
    ]).start(() => this._fadeAnimation());
  }

  _test = () => {
    return(
      <View style={styles.containerView}>
        <View style={styles.outerCircle120} />
        <View style={styles.outerCircle90} />
        <IcAnalyze />
      </View>
    )
  }

}

const styles = StyleSheet.create({
  loading: {
    flex: 1,
    backgroundColor:  CL_MODALOVERLAY,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 32
  },
  loadingText: {
    fontFamily: 'Lato-Regular',
    fontSize: 16,
    lineHeight: 20,
    letterSpacing: 0.0,
    textAlign: 'center',
    color: CL_W
  },
  textLoadWrap: {
    paddingTop: 32,
    paddingHorizontal: 16
  },
  outerCircle90: {
    backgroundColor: CL_RED,
    width: 90,
    height: 90,
    borderRadius: 50,
    justifyContent: 'center',
    alignItems: 'center',
    // opacity: 0.25,
    position: 'absolute',
  },
  outerCircle120: {
    backgroundColor: CL_ORANGE,
    width: 120,
    height: 120,
    borderRadius: 70,
    justifyContent: 'center',
    alignItems: 'center',
    // opacity: 0.25,
    position: 'absolute',
  },
  outerCircle40: {
    backgroundColor: CL_BLUE,
    width: 40,
    height: 40,
    borderRadius: 50,
    justifyContent: 'center',
    alignItems: 'center',
    // opacity: 0.25,
    position: 'absolute',
  },
  containerView: {
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default LoadAnimated;