import Button from '../../button';
import Dropdown from '..';
import Menu from '../../menu';
import React from 'react';
import ReactDOM from 'react-dom';
const menu = (
  <Menu>
    <Menu.Item>Option 1</Menu.Item>
    <Menu.Item>Option 2</Menu.Item>
    <Menu.Item>Option 3</Menu.Item>
    <Menu.Item>Option 4</Menu.Item>
  </Menu>
);
interface PageStates {
  visible: boolean;
}
class App extends React.Component<{}, PageStates> {
  toggleVisible: () => void;
  onVisibleChange: (visible: any) => void;
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
    };
    this.toggleVisible = () => {
      this.setState({
        visible: !this.state.visible,
      });
    };
    this.onVisibleChange = visible => {
      this.setState({
        visible,
      });
    };
  }
  render() {
    return (
      <div>
        <div style={{ marginBottom: '20px' }}>
          <Button onClick={this.toggleVisible} ref="button">
            Toggle Overlay
          </Button>
        </div>
        <Dropdown
          trigger={<span>Hello dropdown</span>}
          triggerType="click"
          visible={this.state.visible}
          onVisibleChange={this.onVisibleChange}
          safeNode={() => this.refs.button}
        >
          {menu}
        </Dropdown>
      </div>
    );
  }
}
ReactDOM.render(<App />, document.getElementById('dropdown-demo-3'));