import React from 'react';
import {connect} from 'react-redux';
import classnames from 'classnames';

class ConnectionStatus extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      hidden: true
    };
  }
  componentWillReceiveProps(nextProps) {
    let disconnected = false;
    nextProps.status.forEach((v, k) => {
      if (!v) {
        disconnected = true;
      }
    });
    if (disconnected) {
      console.log('Disconnection:', nextProps); // eslint-disable-line no-console
      this.hidden = false;
      // This.hidden and setTimeout are hacks to save UI/UX because ackley's shit breaks so much FIX IT ACKLEY
      setTimeout(() => {
        if (!this.hidden) {
          this.setState({hidden: false});
        }
      }, 1500);
    } else {
      console.log('Connection:', nextProps); // eslint-disable-line no-console
      this.hidden = true;
      this.setState({hidden: true});
    }
  }
  render() {
    return (
      <div className={classnames('connection-overlay', {hidden: this.state.hidden})}>
        <div className="connection-modal">
          <div className="connection-issue-icon">!</div>
          <div className="connection-status">Disconnected</div>
          <div className="connection-loading">Trying to reconnect...</div>
        </div>
      </div>
    );
  }
}

ConnectionStatus.propTypes = {
  status: React.PropTypes.object
};

function selectConnectionStatus(state) {
  return {
    status: state.status
  };
}

export default connect(selectConnectionStatus)(ConnectionStatus);