// @require '../../style/reset.scss'
// @require './demo.scss'

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

export default class App extends React.Component {
  testClick() {
    window.console.log('testClick');
  }

  clickHandler() {
    window.console.log(123);
  }

  render() {
    const iconStyle = {
      fontSize: 22,
      padding: '0 5px'
    };

    return (
      <Demo name="Button" doc={<Doc />}>
        <DemoPanel title="默认配色按钮">
          <Button size="s">
            IMUI
          </Button>
          <Button>
            IMUI
          </Button>
          <Button size="l">
            IMUI
          </Button>
          <Button size="l" disabled onClick={this.clickHandler}>
            IMUI
          </Button>
        </DemoPanel>
        <DemoPanel title="outline配色按钮">
          <Button color="outline" size="s">
            IMUI
          </Button>
          <Button color="outline">
            IMUI
          </Button>
          <Button color="outline" size="l">
            IMUI
          </Button>
          <Button color="outline" disabled>
            IMUI
          </Button>
        </DemoPanel>
        <DemoPanel title="primary配色按钮">
          <Button color="primary" size="s">
            IMUI
          </Button>
          <Button color="primary">
            IMUI
          </Button>
          <Button color="primary" size="l">
            IMUI
          </Button>
          <Button color="primary" disabled>
            IMUI
          </Button>
        </DemoPanel>
        <DemoPanel title="weak配色按钮">
          <Button color="weak" size="s">
            IMUI
          </Button>
          <Button color="weak">
            IMUI
          </Button>
          <Button color="weak" size="l">
            IMUI
          </Button>
          <Button color="weak" disabled>
            IMUI
          </Button>
        </DemoPanel>
        <DemoPanel title="包含Icon的按钮">
          <Button onClick={this.testClick}>
            <Icon type="weixin" style={iconStyle} />
          </Button>
          <Button>
            <Icon type="weixin" style={iconStyle} />
            <span>微信</span>
          </Button>
        </DemoPanel>
        <DemoPanel title="有链接的按钮">
          <Button href="//ke.qq.com" target="_blank">
            <Icon type="weixin" style={iconStyle} />
          </Button>
          <Button href="//ke.qq.com" disabled>
            <Icon type="weixin" style={iconStyle} />
          </Button>
        </DemoPanel>
      </Demo>
    );
  }
}

const demo = document.getElementById('demo');

// 会被首页调用，判断下有无节点
if (demo) {
  ReactDom.render(<App />, demo);
}