import React, { Component } from 'react';
import {
  StyleSheet,
  Platform,
  View,
  Keyboard,
  LayoutAnimation,
} from 'react-native';

export default class KeyboardSpace extends Component {
  
  static defaultProps = {
    topInsets: 0,
  };

  constructor(props) {
    super(props);
    this.showListener = null;
    this.hideListener = null;
    this.state = {
      keyboardHeight: 0,
    };
  }

  componentDidMount() {
    if (!this.showListener) {
      let name = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
      this.showListener = Keyboard.addListener(name, e =>
        this.onKeyboardShow(e),
      );
    }
    if (!this.hideListener) {
      let name = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
      this.hideListener = Keyboard.addListener(name, () =>
        this.onKeyboardHide(),
      );
    }
  }

  componentWillUnmount() {
    if (this.showListener) {
      this.showListener.remove();
      this.showListener = null;
    }
    if (this.hideListener) {
      this.hideListener.remove();
      this.hideListener = null;
    }
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevState.keyboardHeight !== this.state.keyboardHeight) {
      LayoutAnimation.configureNext({
        duration: 500,
        create: {
          duration: 300,
          type: LayoutAnimation.Types.easeInEaseOut,
          property: LayoutAnimation.Properties.opacity,
        },
        update: {
          type: LayoutAnimation.Types.spring,
          springDamping: 200,
        },
      });
    }
  }

  onKeyboardShow(e) {
    if (!e || !e.endCoordinates || !e.endCoordinates.height) {
      return;
    }
    let height =
      e.endCoordinates.height +
      (this.props.topInsets ? this.props.topInsets : 0);
    this.setState({ keyboardHeight: height });
  }

  onKeyboardHide() {
    this.setState({ keyboardHeight: 0 });
  }

  render() {
    return (
      <View
        style={[styles.keyboardSpace, { height: this.state.keyboardHeight }]}
      />
    );
  }
}

const styles = StyleSheet.create({
  keyboardSpace: {
    backgroundColor: 'rgba(0, 0, 0, 0)',
    left: 0,
    right: 0,
    bottom: 0,
  },
});