/** @jsx createElement */
import { createElement, Component, render } from 'rax';
import Radio from 'nuke-radio';
import { StyleProvider } from 'nuke-theme-provider';
import {
  decodeVar,
  DemoContainer,
  DemoSection,
  Demo,
  DemoItem,
  initDemo,
} from '@alife/nuke-demo-helper';

const App = class NukeDemoIndex extends Component {
  constructor() {
    super();
    this.state = {
      value: 3,
    };
  }

  groupChange(value) {
    this.setState({
      value,
    });
    console.log('group', value);
  }

  // onChange(value) {

  //   console.log('item', value);
  // }
  // press() {
  //   let tmp = this.state.value;
  //   this.setState({
  //     value: ++tmp
  //   });
  // }

  render() {
    const { value } = this.state;
    return (
      <StyleProvider style={decodeVar(this.props.variable)}>
        <DemoContainer>
          <DemoSection title="小">
            <Demo>
              <DemoItem>
                <Radio size="small" type="dot" checked />
              </DemoItem>
            </Demo>
          </DemoSection>
          <DemoSection title="正常">
            <Demo>
              <DemoItem>
                <Radio type="dot" checked />
              </DemoItem>
            </Demo>
          </DemoSection>

          <DemoSection title="普通样式">
            <Demo>
              <DemoItem>
                <Radio checked />
              </DemoItem>
            </Demo>
          </DemoSection>
          <DemoSection title="未选中">
            <Demo>
              <DemoItem>
                <Radio />
              </DemoItem>
            </Demo>
          </DemoSection>
          <DemoSection title="选中不能操作">
            <Demo>
              <DemoItem>
                <Radio checked disabled />
              </DemoItem>
            </Demo>
          </DemoSection>
          <DemoSection title="未选中不能操作">
            <Demo>
              <DemoItem>
                <Radio disabled />
              </DemoItem>
            </Demo>
          </DemoSection>
          <DemoSection title="dot样式">
            <Demo>
              <DemoItem>
                <Radio checked type="dot" />
              </DemoItem>
            </Demo>
          </DemoSection>
          <DemoSection title="dot 未选中">
            <Demo>
              <DemoItem>
                <Radio type="dot" />
              </DemoItem>
            </Demo>
          </DemoSection>
          <DemoSection title="dot 选中不能操作">
            <Demo>
              <DemoItem>
                <Radio type="dot" checked disabled />
              </DemoItem>
            </Demo>
          </DemoSection>
          <DemoSection title="dot 未选中不能操作">
            <Demo>
              <DemoItem>
                <Radio type="dot" disabled />
              </DemoItem>
            </Demo>
          </DemoSection>
          <DemoSection title="list样式">
            <Demo>
              <DemoItem>
                <Radio checked type="list" />
              </DemoItem>
            </Demo>
          </DemoSection>
          <DemoSection title="empty样式">
            <Demo>
              <DemoItem>
                <Radio type="empty" />
              </DemoItem>
            </Demo>
          </DemoSection>
        </DemoContainer>
      </StyleProvider>
    );
  }
};

window.renderDemo = function (lang, variable) {
  render(<App variable={variable} />);
};

renderDemo('en-us', window.THEME_VARIABLE);

initDemo('radio');