/** @jsx createElement */
import { createElement, Component, render } from 'rax';
import View from 'nuke-view';
import Text from 'nuke-text';
import Checkbox from 'nuke-checkbox';
import Page from 'nuke-page';

const Styles = {
  demo_item: {
    width: 750,
    height: 104,
    marginTop: 30,
    backgroundColor: '#ffffff',
    justifyContent: 'center',
    paddingLeft: 12,
  },
};

const App = class NukeDemoIndex extends Component {
  constructor() {
    super();
    this.state = {
      checked: false,
    };
  }
  render() {
    return (
      <Page title="checkbox">
        <Page.Intro main="Checkbox" sub="normal" />
        <View style={Styles.demo_item}>
          <Checkbox size="small" />
        </View>
        <Page.Intro sub="selected" />
        <View style={Styles.demo_item}>
          <Checkbox size="small" defaultChecked />
        </View>
        <Page.Intro sub="selected" />
        <View style={Styles.demo_item}>
          <Checkbox size="small" defaultChecked type="empty" />
        </View>
        <Page.Intro sub="disabled" />
        <View style={Styles.demo_item}>
          <Checkbox size="small" disabled type="normal" />
        </View>
        <Page.Intro sub="disabled-selected" />
        <View style={Styles.demo_item}>
          <Checkbox
            size="small"
            disabled
            defaultChecked
            type="empty"
          />
        </View>
        <Page.Intro main="Checkbox-List" sub="normal" />
        <View style={Styles.demo_item}>
          <Checkbox size="small" defaultChecked={false} type="list" />
        </View>
        <Page.Intro sub="selected" />
        <View style={Styles.demo_item}>
          <Checkbox size="small" defaultChecked type="list" />
        </View>
        <Page.Intro sub="disabled" />
        <View style={Styles.demo_item}>
          <Checkbox
            size="small"
            disabled
            defaultChecked={false}
            type="list"
          />
        </View>
        <Page.Intro sub="disabled-selected" />
        <View style={Styles.demo_item}>
          <Checkbox
            size="small"
            disabled
            defaultChecked
            type="list"
          />
        </View>
      </Page>
    );
  }
};
render(<App />);