/** @jsx createElement */
import { createElement, Component, render } from 'rax';
import View from 'nuke-view';
import Text from 'nuke-text';
import Page from 'nuke-page';
import NumberPicker from 'nuke-number-picker';
import { StyleProvider } from 'nuke-theme-provider';
import {
  decodeVar,
  DemoContainer,
  DemoSection,
  Demo,
  DemoItem,
  initDemo,
} from '@alife/nuke-demo-helper';

const App = class NukeDemoIndex extends Component {
  render() {
    return (
      <StyleProvider style={decodeVar(this.props.variable)}>
        <DemoContainer>
          <DemoSection title="基础样式">
            <Demo>
              <DemoItem>
                <View style={{ width: 300 }}>
                  <NumberPicker min={1} max={100} defaultValue={1} step={1} />
                </View>
              </DemoItem>
            </Demo>
          </DemoSection>
          <DemoSection title="不可输入">
            <Demo>
              <DemoItem>
                <View style={{ width: 300 }}>
                  <NumberPicker
                    min={1}
                    max={1000}
                    defaultValue={1}
                    editable={false}
                    step={1}
                  />
                </View>
              </DemoItem>
            </Demo>
          </DemoSection>
          <DemoSection title="disable">
            <Demo>
              <DemoItem>
                <View style={{ width: 300 }}>
                  <NumberPicker
                    disabled
                    min={1}
                    max={1000}
                    defaultValue={1}
                    editable={false}
                    step={1}
                  />
                </View>
              </DemoItem>
            </Demo>
          </DemoSection>
        </DemoContainer>
      </StyleProvider>
    );
  }
};
const styles = {
  npwrapper: {
    width: 300,
  },
};

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

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

initDemo('number-picker');