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

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

export default class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      value: '免费'
    };

    this.onChange = this.onChange.bind(this);
  }

  onChange(value) {
    this.setState({ value });
  }

  render() {
    let customStyle = {
      marginTop: '20px',
    };
    return (
      <Demo name="Radiogroup" doc={<Doc />}>
        <DemoPanel title="Radio(基本使用)">
          <Radio value="1">Normal</Radio>
          <Radio value="2" checked>Checked</Radio>
          <Radio value="3" disabled>Disabled</Radio>
          <Radio value="4" checked disabled>Checked & Disabled</Radio>
          <Radio value="5" checked style={customStyle}>Checked & Disabled</Radio>
        </DemoPanel>

        <DemoPanel title="Radio&RadioGroup(配合使用)">
          <RadioGroup onChange={this.onChange} value={this.state.value}>
            <Radio value="免费">免费</Radio>
            <Radio value="收费">收费</Radio>
          </RadioGroup>
          <p>你选的是: {this.state.value}</p>
        </DemoPanel>
      </Demo>
    );
  }
}

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

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