import React from 'react';
import { Platform, Keyboard } from 'react-native';
import { TabBarBottom, TabBarTop } from 'react-navigation';

class TabBarComponent extends React.PureComponent {
  constructor(props) {
    super(props);

    this.keyboardWillShow = this.keyboardWillShow.bind(this);
    this.keyboardWillHide = this.keyboardWillHide.bind(this);

    this.state = {
      isVisible: true,
    };
  }

  componentWillMount() {
    this.keyboardWillShowSub = Keyboard.addListener('keyboardDidShow', this.keyboardWillShow);
    this.keyboardWillHideSub = Keyboard.addListener('keyboardDidHide', this.keyboardWillHide);
  }

  componentWillUnmount() {
    this.keyboardWillShowSub.remove();
    this.keyboardWillHideSub.remove();
  }

  keyboardWillShow = () => {
    this.setState({
      isVisible: false,
    });
  };

  keyboardWillHide = () => {
    this.setState({
      isVisible: true,
    });
  };

  render() {
    const TBB = Platform.select({
      ios: TabBarBottom,
      android: TabBarTop,
    });
    return this.state.isVisible ?
      <TBB {...this.props} />
      :
      null;
  }
}

export default TabBarComponent;
