import React, { Component } from 'react';
import { ActivityIndicator, ProgressBarAndroid, Platform, StyleSheet, Text, View } from 'react-native';

export default class App extends Component<{}> {
  render() {
    return (
      <View style={styles.container}>
        <ActivityIndicator size="small" color="green" />
        <ActivityIndicator size="large" color="purple" />
        <ProgressBarAndroid styleAttr="Inverse" />
        <ProgressBarAndroid styleAttr="Large" size="small" />
        <ProgressBarAndroid styleAttr="Horizontal" />
        <ProgressBarExample initialProgress={0} />
        <ProgressBarExample progressTintColor="red" initialProgress={0.4} />
        <ProgressBarExample progressTintColor="red" initialProgress={0.4} />
        <ProgressBarExample progressTintColor="orange" initialProgress={0.6} />
        <ProgressBarExample progressTintColor="yellow" initialProgress={0.8} />

        <ProgressBarAndroid
          styleAttr="Normal"
          color="red"
          progress={0.5}
        />
      </View>
    );
  }
}

class ProgressBarExample extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      progress: props.initialProgress,
    };
  }

  componentDidMount() {
    this.progressLoop();
  }

  progressLoop() {
    setTimeout(() => {
      this.setState({
        progress:
          this.state.progress === 1
            ? 0
            : Math.min(1, this.state.progress + 0.01),
      });

      this.progressLoop();
    }, 17 * 2);
  }

  render() {
    const progressStyle = { marginTop: 20, height: 50, width: 300 };

    return (
      <ProgressBarAndroid
        styleAttr="Horizontal"
        animating={true}
        style={progressStyle}
        color={this.props.progressTintColor}
        progress={this.state.progress}
      />
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
});