import React, { Component } from 'react';
import {
  SafeAreaView,
  KeyboardAvoidingView,
} from 'react-native';
import events from '../../events';
import DevTool from './index';
import Modal from '../base/Modal';


class Events extends Component {
  constructor() {
    super();
    this.state = {
      visible: false,
    };
    this.listen = this.listen.bind(this);
  }

  componentDidMount() {
    events.listen(this.listen);
  }

  componentWillUnmount() {
    events.unlisten(this.listen);
  }

  listen(type, data) {
    if (type === 'SHOW_DEVTOOLS') {
      return this.setState({
        visible: true,
      });
    }

    if (type === 'HIDE_DEVTOOLS') {
      return this.setState({
        visible: false,
      });
    }
  }

  render() {
    const {
      ...others
    } = this.props;

    return (
      <Modal
        animationType="slide"
        transparent={false}
        visible={this.state.visible}
        onRequestClose={() => {
        }}
      >
        <SafeAreaView
          forceInset={{ top: 'always', vertical: 'always', bottom: 'always' }}
          style={{flex: 1}}
        >
          <KeyboardAvoidingView
            style={{flex: 1}}
            behavior="padding"
            enabled
          >
            <DevTool
              {...others}
              onClose={() => {
                events.publish('HIDE_DEVTOOLS');
              }}
            />
          </KeyboardAvoidingView>
        </SafeAreaView>
      </Modal>
    )
  }
}

export default Events;