import Button from '../../button';
import Dialog from '..';
import React from 'react';
import ReactDOM from 'react-dom';
import Switch from '../../switch';

const largeContent = new Array(60)
  .map((_, index) => (
    <p key={index}>Start your business here by searching a popular product</p>
  ));

class Demo extends React.Component {
  state = {
    visible: false,
    isFullScreen: false,
    closeOnMaskClick: false,
  };

  onOpen = () => {
    this.setState({
      visible: true,
    });
  };

  onClose = () => {
    this.setState({
      visible: false,
    });
  };

  toggleIsFullScreen = () => {
    this.setState({
      isFullScreen: !this.state.isFullScreen,
    });
  };

  toggleCloseOnMaskClick = () => {
    this.setState({
      closeOnMaskClick: !this.state.closeOnMaskClick,
    });
  };

  render() {
    const { visible, isFullScreen, closeOnMaskClick } = this.state;

    return (
      <div>
        <div style={{ display: 'block', marginBottom: '10px' }}>
          When the height of the dialog exceeds the viewport height of the
          browser, whether to show the scroll bar:
        </div>
        <Switch
          style={{ display: 'block', marginBottom: '10px' }}
          checked={isFullScreen}
          onChange={this.toggleIsFullScreen}
        />
        <div style={{ display: 'block', marginBottom: '10px' }}>
          Close on mask click:
        </div>
        <Switch
          style={{ display: 'block', marginBottom: '10px' }}
          checked={closeOnMaskClick}
          onChange={this.toggleCloseOnMaskClick}
        />
        <Button onClick={this.onOpen} type="primary">
          Open dialog
        </Button>
        <Dialog
          title="Welcome to Alibaba.com"
          visible={visible}
          isFullScreen={isFullScreen}
          closeMode={
            closeOnMaskClick ? [ 'close', 'esc', 'mask' ] : [ 'close', 'esc' ]
          }
          onOk={this.onClose}
          onCancel={this.onClose}
          onClose={this.onClose}
        >
          {largeContent}
        </Dialog>
      </div>
    );
  }
}

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