/** @jsx createElement */
import { createElement, Component, render } from 'rax';
import View from 'nuke-view';
import Text from 'nuke-text';
import Radio from 'nuke-radio';
import Button from 'nuke-button';
import Page from 'nuke-page';
import { StyleProvider } from 'nuke-theme-provider';

const orange = {
  Core: {
    'color-brand1-1': '#FFF0E6', // [主品牌色-浅]
    'color-brand1-6': '#FF6A00', // [主品牌色-常规]
    'color-brand1-9': '#E35300', // [主品牌色-深]
  },
};
const App = class NukeDemoIndex extends Component {
  constructor() {
    super();
    this.state = {
      theme: {},
    };
  }
  onChange(e) {
    console.log(e);
  }

  render() {
    return (
      <StyleProvider style={this.state.theme}>
        <Page title="radio">
          <Page.Intro main="Radio" sub="normal" />
          <View style={Styles.demo_item}>
            <Radio size="small" />
            <Radio size="small" checked />
            <Radio size="small" checked disabled />
          </View>

          <Page.Intro sub="empty" />
          <View style={Styles.demo_item}>
            <Radio size="small" type="empty" />
            <Radio size="small" checked type="empty" />
            <Radio size="small" checked type="empty" disabled />
          </View>

          <Page.Intro sub="list" />
          <View style={Styles.demo_item}>
            <Radio size="small" type="list" />
            <Radio size="small" checked type="list" />
            <Radio size="small" checked disabled type="list" />
          </View>
          <Page.Intro main="Radio" sub="dot" />
          <View style={Styles.demo_item}>
            <Radio size="small" type="dot" />
            <Radio size="small" checked type="dot" />
            <Radio size="small" checked disabled type="dot" />
          </View>
        </Page>
      </StyleProvider>
    );
  }
};
const Styles = {
  demo_item: {
    width: 750,
    height: 104,
    marginTop: 30,
    backgroundColor: '#ffffff',
    flexDirection: 'row',
    alignItems: 'center',
    paddingLeft: 12,
  },
};
render(<App />);