'use strict';
var React = require('react-native');
var {
  AppRegistry,
  ActivityIndicatorIOS,
  View,
  StyleSheet
} = React;
var TimerMixin = require('react-timer-mixin');

var ToggleAnimatingActivityIndicator = React.createClass({
  mixins: [TimerMixin],
  getInitialState: function() {
    return {
      animating: true
    }
  },
  setToggleTimeout: function () {
    this.setTimeout(() => {
      this.setState({animating:!this.state.animating});
      this.setToggleTimeout();
    }, 5000);
  },
  componentDidMount: function () {
    this.setToggleTimeout();
  },
  render: function () {
    return (
      <View style={styles.container}>
        <View style={styles.horizontal}>
          <ActivityIndicatorIOS
            animating={this.state.animating}
            style={[styles.centering, styles.gray, {height:50, width:50, borderRadius:5}]}
            color='#aa00aa'
            size='small'
          />
          <ActivityIndicatorIOS
            animating={this.state.animating}
            style={[styles.centering, styles.gray, {height:50, width:50, borderRadius:5}]}
            color='#aa3300'
            size='large'
          />
          <ActivityIndicatorIOS
            animating={this.state.animating}
            style={[styles.centering, styles.gray, {height:50, width:50, borderRadius:5}]}
            color='#00aa00'
            size='small'
          />
        </View>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex:1,
    // alignItems: 'center',
    justifyContent: 'center',
  },
  centering:{
    alignItems: 'center',
    justifyContent: 'center',
  },
  gray: {
    backgroundColor: '#cccccc'
  },
  horizontal:{
    flexDirection:'row',
    justifyContent: 'space-around',
  }
});

AppRegistry.registerComponent('reactnative', () => ToggleAnimatingActivityIndicator);
