import React from 'react';
import ReactDOM from 'react-dom';

import Popup from '../lib/react-custom-popup.js';

const CUSTOM_DIMENSION = 500;

class App extends React.Component {
  constructor (props) {
    super(props);
    this.onCustomLayoutCheckboxClick = this.onCustomLayoutCheckboxClick.bind(this);
    this.onHideOverlayCheckboxClick = this.onHideOverlayCheckboxClick.bind(this);
    this.onShowPopupButtonClick = this.onShowPopupButtonClick.bind(this);
    this.onPopupOverlayClick = this.onPopupOverlayClick.bind(this);

    this.refButton = React.createRef();

    this.state = {
      customLayout: false,
      hideOverlay: false,
      popupVisible: false
    };
  }
  onHideOverlayCheckboxClick (event) {
    this.setState({hideOverlay: !this.state.hideOverlay});
  }
  onCustomLayoutCheckboxClick (event) {
    this.setState({customLayout: !this.state.customLayout});
  }
  onShowPopupButtonClick (event) {
    event.stopPropagation();
    event.preventDefault();

    this.setState({popupVisible: true});
  }
  onPopupOverlayClick (event) {
    event.stopPropagation();
    event.preventDefault();

    this.setState({popupVisible: false});
  }
  onPopupLayout (currentLayout) {
    return [
      (window.innerWidth - CUSTOM_DIMENSION) / 2,
      (window.innerHeight - CUSTOM_DIMENSION) / 2,
      CUSTOM_DIMENSION,
      CUSTOM_DIMENSION
    ];
  }
  render () {
    return (
      <React.Fragment>
        <h1>React Custom Popup Example</h1>

        <p>
          <strong>Configure</strong>
          <br/>
          <input
            id="checkboxHideOverlay"
            type="checkbox"
            defaultValue={this.state.hideOverlay}
            onClick={this.onHideOverlayCheckboxClick}
          />
          <label htmlFor="checkboxHideOverlay">Hide overlay</label>
          <br/>
          <input
            id="checkboxCustomLayout"
            type="checkbox"
            defaultValue={this.state.customLayout}
            onClick={this.onCustomLayoutCheckboxClick}
          />
          <label htmlFor="checkboxCustomLayout">Custom layout</label>
        </p>

        <button
          ref={this.refButton}
          onClick={this.onShowPopupButtonClick}
        >
          Show Popup
        </button>

        <Popup
          anchor={this.refButton}
          hideOverlay={this.state.hideOverlay}
          visible={this.state.popupVisible}
          onLayout={
            (this.state.customLayout) ? this.onPopupLayout : undefined
          }
          onOverlayClick={this.onPopupOverlayClick}
        >
          <div id="popup" className={`${this.state.customLayout ? 'custom-layout' : ''}`}>
            <h2>Hello, I'm a popup!</h2>
            <p>
              <button onClick={this.onPopupOverlayClick}>Close</button>
            </p>
          </div>
        </Popup>
      </React.Fragment>
    );
  }
}

window.addEventListener('load', () => {
  ReactDOM.render(
    <App />, document.getElementById('main')
  );
});