import React from 'react';
import ReactDom from 'react-dom';
import { Demo, DemoPanel } from '../../../external/demo/index';
import Doc from './doc.md';
import Button from '../../button';
import Alert from '../index';
import '../style/index.scss';
import '../style/v2.scss';

export default class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      visible: true,
    };
  }

  render() {
    return (
      <Demo name="提示信息" doc={<Doc />}>
        <DemoPanel title="普通">
          <Alert>
            When I am an old woman I shall wear purple
            With a red hat which doesn't go, and doesn't suit me.
            And I shall spend my pension on brandy and summer gloves
            And satin sandals, and say we've no <a href="http://imweb.github.io/imui/">money</a> for butter.
          </Alert>
        </DemoPanel>
        <DemoPanel title="不同类型">
          <Alert type="success">Well done! You successfully read this important alert message.</Alert>
          <br />
          <Alert type="info">Heads up! This alert needs your attention, but it's not super important.</Alert>
          <br />
          <Alert type="warning">Warning! Better check yourself, you're not looking too good.</Alert>
          <br />
          <Alert type="danger">Oh snap! Change a few things up and try submitting again.</Alert>
          <br />
          <Alert type="global" closeable={false}>页面顶部全局样式, 普通提示内容, <em>强调提示内容</em> <a href="#">链接内容</a></Alert>
          <br />
          <Alert type="module">模块样式 <em>强调提示内容</em> <a href="#">链接内容</a></Alert>
          <br />
          <Alert type="module">身份权限设置功能已升级,升级后将提供8种固定角色,且每种角色的权限固定,
          为保证正常使用,请将原体系中的角色及其成员迁移至新的体系角色中.为保证正常使用,请将原体系中的角色及其成员迁移至新体系角色中.</Alert>
          <br />
        </DemoPanel>
        <DemoPanel title="visible">
          <Alert visible={this.state.visible}>
            I shall sit down on the pavement when I'm tired
            And gobble up samples in shops and press alarm bells
            And run my stick along the public railings
            And make up for the sobriety of my youth.
          </Alert>
          <br />
          <Button onClick={() => {
            this.setState({
              visible: !this.state.visible,
            });
          }}>visible toggle</Button>
        </DemoPanel>
        <DemoPanel title="closeable">
          <Alert closeable={false}>
            I shall go out in my slippers in the rain
            And pick flowers in other people's gardens
            And learn to spit.
          </Alert>
        </DemoPanel>
        <DemoPanel title="onClose">
          <Alert onClose={() => {
            window.alert('onClose');
          }}>
            You can wear terrible shirts and grow more fat
            And eat three pounds of sausages at a go
            Or only bread and pickle for a week
            And hoard pens and pencils and beermats and things in boxes.
            But now we must have clothes that keep us dry
            And pay our rent and not swear in the street
            And set a good example for the children.
            We must have friends to dinner and read the papers.
            But maybe I ought to practice a little now?
            So people who know me are not too shocked and surprised
            When suddenly I am old, and start to wear purple.
          </Alert>
        </DemoPanel>
      </Demo>
    );
  }

}

const demo = document.getElementById('demo');
if (demo) {
  ReactDom.render(<App />, demo);
}