/** @jsx createElement */
import { createElement, Component, render } from 'rax';
import View from 'nuke-view';
import Checkbox from 'nuke-checkbox';
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 = {
      checked: true,
      dataSource: [
        { value: 'apple', label: '苹果' },
        { value: 'pear', label: '梨', disabled: true },
        { value: 'orange', label: '橘子' },
      ],
      value: ['apple'],
      group_value: [3, 4],
    };
  }

  render() {
    return (
      <StyleProvider style={decodeVar(this.props.variable)}>
        <DemoContainer>
          <DemoSection title="普通样式">
            <Demo>
              <DemoItem direction="column">
                <Checkbox defaultChecked size="small" />
              </DemoItem>
              <DemoItem direction="column">
                <Checkbox defaultChecked />
              </DemoItem>
            </Demo>
          </DemoSection>
          <DemoSection title="空心样式">
            <Demo>
              <DemoItem direction="column">
                <Checkbox defaultChecked type="empty" size="small" />
              </DemoItem>
              <DemoItem direction="column">
                <Checkbox defaultChecked type="empty" />
              </DemoItem>
            </Demo>
          </DemoSection>
          <DemoSection title="空心样式 未选中">
            <Demo>
              <DemoItem direction="column">
                <Checkbox defaultChecked={false} type="empty" size="small" />
              </DemoItem>
              <DemoItem direction="column">
                <Checkbox defaultChecked={false} type="empty" />
              </DemoItem>
            </Demo>
          </DemoSection>
          <DemoSection title="list style">
            <Demo>
              <DemoItem>
                <Checkbox defaultChecked type="list" size="small" />
              </DemoItem>
              <DemoItem>
                <Checkbox defaultChecked type="list" />
              </DemoItem>
            </Demo>
          </DemoSection>
        </DemoContainer>
      </StyleProvider>
    );
  }
};

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

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

initDemo('checkbox');