import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Popup ,popupOpen } from '../../lib/popup';

class Demo extends React.Component<any, any> {
  constructor(props, state) {
    super(props, state)
  }
  public state = {
    open: false
  }
  public render() {
    return (
      <div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <button onClick={() => popupOpen('test')}>open</button>
        <Popup
          id="test"
          //visible={this.state.open}
          //onClose={() => this.setState({ open: false })}
          //horizontal="right"
        >
          <button onClick={() => this.setState({ open: false })}>close</button>
        </Popup>
      </div>
    )
  }
}

ReactDOM.render(<Demo />, document.getElementById('root'));