import React, { PropTypes } from 'react';
import { View, DeviceEventEmitter, Animated } from 'react-native';

const KeyboardAvoid = React.createClass({
  propTypes: {
    duration: PropTypes.number.isRequired,
    additionalHeight: PropTypes.number.isRequired,
  },

  getInitialState() {
    return {
      height: new Animated.Value(0),
    };
  },

  getDefaultProps() {
    return {
      duration: 400,
      additionalHeight: 50,
    };
  },

  componentDidMount() {
    this.keyboardDidShowListener = DeviceEventEmitter.addListener('keyboardDidShow', this.keyboardDidShow);
    this.keyboardDidHideListener = DeviceEventEmitter.addListener('keyboardDidHide', this.keyboardDidHide);
  },

  componentWillUnmount() {
    this.keyboardDidShowListener.remove();
    this.keyboardDidHideListener.remove();
  },

  animate(toValue) {
    Animated.timing(this.state.height, { toValue, duration: this.props.duration }).start();
  },

  keyboardDidShow(e) {
    this.animate(e.endCoordinates.height - this.props.additionalHeight);
  },

  keyboardDidHide(e) {
    this.animate(0);
  },

  render() {
    return (
      <Animated.View style={[this.props.style, { flex: 1, paddingBottom: this.state.height }]}>
        {this.props.children}
      </Animated.View>
    );
  },
});

export default KeyboardAvoid;