import Message from '..';
import React from 'react';
import ReactDOM from 'react-dom';
import { Radio } from '../..';

type MessageType = 'success' | 'warning' | 'error' | 'notice' | 'loading';
const types = [ 'success', 'warning', 'error', 'notice', 'loading' ];
const sizeList = [
  {
    value: 'medium',
    label: 'medium',
  },
];

const shapeList = [
  {
    value: 'inline',
    label: 'inline',
  },
  {
    value: 'addon',
    label: 'addon',
  },
  {
    value: 'toast',
    label: 'toast',
  },
];

const CloseList = [
  {
    value: true,
    label: 'true',
  },
  {
    value: false,
    label: 'false',
  },
];

const ColorList = [
  {
    value: 'colorful',
    label: 'colorful',
  },
  {
    value: 'white',
    label: 'white',
  },
];

interface IState {
  size: 'medium' | 'large';
  shape: 'inline' | 'addon' | 'toast';
  closeable: boolean;
  bgcolor: string;
}

class Demo extends React.Component<{}, IState> {
  constructor(props) {
    super(props);
    this.state = {
      size: 'medium',
      shape: 'inline',
      closeable: true,
      bgcolor: 'colorful',
    };
  }

  handleSize = size => {
    this.setState({ size });
  };

  handleShape = shape => {
    this.setState({ shape });
  };

  handleClose = closeable => {
    this.setState({ closeable });
  };

  handleColor = bgcolor => {
    this.setState({ bgcolor });
  };

  render() {
    const { size, shape, closeable, bgcolor } = this.state;

    return (
      <div>
        <span className="demo-label">Select Size：</span>
        <Radio.Group
          defaultValue="medium"
          dataSource={sizeList}
          value={this.state.size}
          onChange={this.handleSize}
        />
        <br />
        <br />
        <span className="demo-label">Select Shape：</span>
        <Radio.Group
          defaultValue="inline"
          dataSource={shapeList}
          value={this.state.shape}
          onChange={this.handleShape}
        />
        <br />
        <br />
        <span className="demo-label">Select Closeable：</span>
        <Radio.Group
          defaultValue={true}
          // @ts-ignore
          dataSource={CloseList}
          value={this.state.closeable}
          onChange={this.handleClose}
        />
        <br />
        <br />
        <span className="demo-label">Select BgColor：</span>
        <Radio.Group
          defaultValue="colorful"
          dataSource={ColorList}
          value={this.state.bgcolor}
          onChange={this.handleColor}
        />
        <br />
        <br />
        <div className="message-size-shape-demo">
          {types.map(type => (
            <div>
              <Message
                key={type}
                title={type}
                type={type as MessageType}
                size={size}
                shape={shape}
                closeable={closeable}
                bgcolor={bgcolor}
              >
                content content content content content content content content
                content content content content content
              </Message>
              <br />
            </div>
          ))}
        </div>
      </div>
    );
  }
}

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