import './demo5.css';
import Overlay from '..';
import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from '../..';
const { Popup } = Overlay;

class Demo extends React.Component {
  btn1: any;
  btn2: any;
  overlay1: any;
  overlay2: any;

  state = {
    visible: false,
    groupVisible: false,
  };

  onVisibleChange = visible => {
    this.setState({
      visible,
    });
  };

  onGroupVisibleChange = groupVisible => {
    this.setState({
      groupVisible,
    });
  };

  render() {
    return (
      <div>
        <div>
          <Popup trigger={<Button>Open</Button>}
            triggerType="click"
            visible={this.state.visible}
            onVisibleChange={this.onVisibleChange}>
            <span className="overlay-demo">
                            Hello World From Popup!
            </span>
          </Popup>
        </div>
        <br />
        <div>
          <Popup trigger={<Button style={{ marginRight: '50px' }} ref={ref => { this.btn1 = ref; }}>Paired Popup 1</Button>}
            triggerType="click"
            visible={this.state.groupVisible}
            safeNode={[ () => this.btn2, () => this.overlay2 ]}
            onVisibleChange={this.onGroupVisibleChange}>
            <span className="overlay-demo" ref={ref => { this.overlay1 = ref; }}>
                            Hello World From Popup!
            </span>
          </Popup>
          <Popup trigger={<Button ref={ref => { this.btn2 = ref; }}>Paired Popup 2</Button>}
            triggerType="click"
            visible={this.state.groupVisible}
            safeNode={[ () => this.btn1, () => this.overlay1 ]}
            onVisibleChange={this.onGroupVisibleChange}>
            <span className="overlay-demo" ref={ref => { this.overlay2 = ref; }}>
                            Hello World From Popup!
            </span>
          </Popup>
        </div>
      </div>
    );
  }
}

ReactDOM.render(<Demo />, document.getElementById('overlay-demo-5'));