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

import Switch from 'nuke-switch';
import ThemeProvider from 'nuke-theme-provider';
import {
  decodeVar,
  DemoContainer,
  DemoSection,
  Demo,
  DemoItem,
  initDemo,
} from '@alife/nuke-demo-helper';

const { StyleProvider } = ThemeProvider;

const App = class NukeDemoIndex extends Component {
  constructor() {
    super();
    this.state = {
      switch1: true,
      switch2: false,
      switch3: true,
      switch4: false,
    };
  }
  change = (item, value) => {
    const obj = {};
    obj[item] = value;
    this.setState(obj);
  };

  render() {
    return (
      <StyleProvider style={decodeVar(this.props.variable)}>
        <DemoContainer>
          <DemoSection title="iOS">
            <Demo>
              <DemoItem direction="column">
                <Switch
                  type="iOS"
                  style={styles.item}
                  key="switch1"
                  defaultChecked
                />

                <Switch
                  type="iOS"
                  style={styles.item}
                  key="switch2"
                />
              </DemoItem>
              <DemoItem direction="column">
                <Switch
                  type="iOS"
                  style={styles.item}
                  key="switch3"
                  disabled
                  defaultChecked
                />

                <Switch
                  type="iOS"
                  style={styles.item}
                  key="switch4"
                  disabled
                />
              </DemoItem>
            </Demo>
          </DemoSection>
          <DemoSection title="android">
            <Demo>
              <DemoItem direction="column">
                <Switch
                  type="android"
                  style={styles.item}
                  key="switch5"
                  defaultChecked
                />

                <Switch
                  type="android"
                  style={styles.item}
                  key="switch6"
                />
              </DemoItem>
              <DemoItem direction="column">
                <Switch
                  type="android"
                  style={styles.item}
                  key="switch7"
                  disabled
                  defaultChecked
                />

                <Switch
                  type="android"
                  style={styles.item}
                  disabled
                  key="switch8"
                />
              </DemoItem>
            </Demo>
          </DemoSection>
        </DemoContainer>
      </StyleProvider>
    );
  }
};
const styles = {
  item: {
    marginBottom: 30,
  },
};
window.renderDemo = function (lang, variable) {
  render(<App variable={variable} />);
};

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

initDemo('switch');