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

type FooterAlignType = 'right' | 'left' | 'center';

class Demo extends React.Component {
  state = {
    visible: false,
    footerActions: [ 'ok', 'cancel' ],
    footerAlign: 'right' as FooterAlignType,
    loading: false,
  };

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

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

  toggleFooterActions = footerActionsStr => {
    this.setState({
      footerActions: footerActionsStr.split(','),
    });
  };

  toggleFooterAlign = footerAlign => {
    this.setState({
      footerAlign,
    });
  };

  toggleOkLoader = loading => {
    this.setState({
      loading,
    });
  };

  render() {
    const { visible, footerActions, footerAlign, loading } = this.state;
    const okProps = {
      loading,
    };

    return (
      <div>
        <Button onClick={this.onOpen} type="primary">
                    Open dialog
        </Button>
        <Dialog
          title="Customize buttons of footer"
          visible={visible}
          footerActions={footerActions}
          footerAlign={footerAlign}
          onOk={this.onClose}
          onCancel={this.onClose}
          onClose={this.onClose}
          okProps={okProps}
        >
          <div className="demo-content">
            <Radio.Group
              className="demo-radio-group"
              shape="button"
              value={footerActions.join(',')}
              onChange={this.toggleFooterActions}
            >
              <Radio value="ok,cancel">ok is left</Radio>
              <Radio value="cancel,ok">ok is right</Radio>
              <Radio value="ok">only ok</Radio>
              <Radio value="cancel">only cancel</Radio>
            </Radio.Group>
            <br />
            <br />
            <Radio.Group
              className="demo-radio-group"
              shape="button"
              value={footerAlign}
              onChange={this.toggleFooterAlign}
            >
              <Radio value="left">left</Radio>
              <Radio value="center">center</Radio>
              <Radio value="right">right</Radio>
            </Radio.Group>
            <br />
            <br />
            <Radio.Group
              className="demo-radio-group"
              shape="button"
              value={loading}
              onChange={this.toggleOkLoader}
            >
              <Radio value={false}>Loading Off</Radio>
              <Radio value>Loading On</Radio>
            </Radio.Group>
          </div>
        </Dialog>
      </div>
    );
  }
}

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