import React from "react"
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Easing,
  Animated,
} from "react-native"
import PropTypes from "prop-types"

var style = StyleSheet.create({
  container: {
    width: "100%",
    flexDirection: "row",
    overflow: "hidden",
    borderWidth: 2,
    borderColor: "#555555",
    borderRadius: 8,
    marginBottom: 5,
    backgroundColor: "#FFFFFF",
  },
  bar: {
    flexDirection: "row",
    justifyContent: "flex-end",
    alignItems: "center",
    backgroundColor: "#3BB0FD",
  },
  value: {
    position: "absolute",
    right: 0,
    paddingRight: 5,
    backgroundColor: "#00000000",
    color: "#FFFFFF",
  },
})

export class ProgressBar extends React.Component {
  static propInfo = {
    height: PropTypes.number,
    value: PropTypes.number,
  }

  static defaultProps = {
    value: 0,
  }

  constructor(props) {
    super(props)
    this.state = {
      animatedValue: new Animated.Value(props.value % 101),
    }
  }

  componentWillReceiveProps(nextProps) {
    if (this.props.value !== nextProps.value) {
      Animated.timing(this.state.animatedValue, {
        toValue: nextProps.value % 101,
        easing: Easing.out(Easing.ease),
        duration: 500,
      }).start()
    }
  }

  render() {
    const { height } = this.props
    const width = this.state.animatedValue.interpolate({
      inputRange: [0, 100],
      outputRange: ["0%", "100%"],
    })

    return (
      <View style={[style.container, { height }]}>
        <Animated.View
          style={[
            style.bar,
            {
              width,
            },
          ]}>
          <Text style={style.value}>{this.props.value}%</Text>
        </Animated.View>
      </View>
    )
  }
}