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

class Demo extends React.Component {
  state = {
    visible: false,
    fullyCustomizedVisible: false,
    textCustomizedVisible: false,
  };

  onOpenFullyCustomized = () => {
    this.setState({
      fullyCustomizedVisible: true,
    });
  };

  onCloseFullyCustomized = () => {
    this.setState({
      fullyCustomizedVisible: false,
    });
  };

  onOpenTextCustomized = () => {
    this.setState({
      textCustomizedVisible: true,
    });
  };

  onCloseTextCustomized = () => {
    this.setState({
      textCustomizedVisible: false,
    });
  };

  render() {
    return (
      <div>
        <Button onClick={this.onOpenFullyCustomized} type="primary">
          Fully Customized Footer
        </Button>
        <br />
        <br />
        <Dialog
          title="Welcome to Alibaba.com"
          footer={
            <Button
              warning
              type="primary"
              onClick={this.onCloseFullyCustomized}
            >
              Customize footer
            </Button>
          }
          visible={this.state.fullyCustomizedVisible}
          onOk={this.onCloseFullyCustomized}
          onCancel={this.onCloseFullyCustomized}
          onClose={this.onCloseFullyCustomized}
        >
          Start your business here by searching a popular product
        </Dialog>
        <Button onClick={this.onOpenTextCustomized} type="primary">
          Text Only Customize
        </Button>
        <Dialog
          title="Welcome to Alibaba.com"
          visible={this.state.textCustomizedVisible}
          onOk={this.onCloseTextCustomized}
          onCancel={this.onCloseTextCustomized}
          onClose={this.onCloseTextCustomized}
          okProps={{ children: 'Custom OK', className: 'asdf' }}
          cancelProps={{ children: 'Custom Cancel' }}
        >
          Start your business here by searching a popular product
        </Dialog>
      </div>
    );
  }
}

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