import Balloon from '..';
import Button from '../../button';
import React from 'react';
import ReactDOM from 'react-dom';

interface PageStates {
  visible: boolean;
}
class App extends React.Component<{}, PageStates> {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
    };
  }

  // triggered every time visible becomes false
  onClose() {
    console.log('onClose doing!');
  }

  onClick() {
    this.setState({ visible: true });
  }

  render() {
    const visibleTrigger = (
      <Button onClick={this.onClick.bind(this)} type="primary">
        click to pupup the card
      </Button>
    );
    const content = <div>content</div>;

    return (
      <div>
        <Balloon
          trigger={visibleTrigger}
          triggerType="click"
          closable={false}
          visible={this.state.visible}
          onClose={this.onClose.bind(this)}
        >
          {content}
        </Balloon>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('balloon-demo-9'));