import Button from '../../button';
import Dialog from '..';
import Radio from '../../radio';
import React from 'react';
import ReactDOM from 'react-dom';

const sizeList = [
  {
    value: 'xs',
    label: 'xs',
  },
  {
    value: 'small',
    label: 'small',
  },
  {
    value: 'middle',
    label: 'middle',
  },
  {
    value: 'large',
    label: 'large',
  },
];
class Demo extends React.Component {
  state = {
    visible: false,
    size: 'middle',
  };

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

  onClose = (reason: string) => {
    console.log(reason);

    this.setState({
      visible: false,
    });
  };
  handlesize = (size: any) => {
    this.setState({ size });
  };

  render() {
    return (
      <div>
        <Radio.Group
          defaultValue="medium"
          dataSource={sizeList}
          value={this.state.size}
          onChange={this.handlesize}
        />
        <Button onClick={this.onOpen} type="primary">
                    Open dialog
        </Button>
        <Dialog
          title="Welcome to Alibaba.com"
          visible={this.state.visible}
          size={this.state.size as 'xs' | 'small' | 'middle' | 'large'}
          onOk={this.onClose.bind(this, 'okClick')}
          onCancel={this.onClose.bind(this, 'cancelClick')}
          onClose={this.onClose}
        >
                    Start your business here by searching a popular product
        </Dialog>
      </div>
    );
  }
}

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