/** @jsx createElement */
import { createElement, Component, render } from 'rax';
import Button from 'nuke-button';
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="type">
            <Demo>
              <DemoItem direction="column">
                <Button style={styles.btnblock} type="normal">
                  Normal
                </Button>
                <Button style={styles.btnblock} type="primary">
                  Primary
                </Button>
                <Button style={styles.btnblock} disabled type="normal">
                  Normal Disabled
                </Button>
              </DemoItem>
            </Demo>
          </DemoSection>
          <DemoSection title="Normal">
            <Demo>
              <DemoItem direction="row">
                <Button style={styles.btn} size="large" type="primary">
                  large
                </Button>
                <Button style={styles.btn} size="medium" type="primary">
                  medium
                </Button>
                <Button style={styles.btn} size="small" type="primary">
                  small
                </Button>
              </DemoItem>
            </Demo>
          </DemoSection>
          <DemoSection title="Primary">
            <Demo>
              <DemoItem direction="row">
                <Button style={styles.btn} type="primary">
                  Normal
                </Button>
                <Button style={styles.btn} type="primary">
                  Tap
                </Button>
                <Button style={styles.btn} disabled type="primary">
                  Disable
                </Button>
              </DemoItem>
            </Demo>
          </DemoSection>
          <DemoSection title="Secondary">
            <Demo>
              <DemoItem direction="row">
                <Button style={styles.btn} type="secondary">
                  Normal
                </Button>
                <Button style={styles.btn} type="secondary">
                  Tap
                </Button>
                <Button style={styles.btn} disabled type="secondary">
                  Disable
                </Button>
              </DemoItem>
            </Demo>
          </DemoSection>
          <DemoSection title="Warning">
            <Demo>
              <DemoItem direction="row">
                <Button style={styles.btn} type="normal" shape="warning">
                  Normal
                </Button>
                <Button style={styles.btn} type="primary" shape="warning">
                  Tap
                </Button>
                <Button style={styles.btn} disabled type="warning">
                  Disable
                </Button>
              </DemoItem>
            </Demo>
          </DemoSection>

          <DemoSection title="Block">
            <Demo>
              <DemoItem>
                <Button style={styles.btnblock} block="true" type="primary">
                  Block Primary
                </Button>
              </DemoItem>
            </Demo>
          </DemoSection>

          <DemoSection title="Group">
            <Demo>
              <DemoItem>
                <Button.Group
                  style={{
                    marginBottom: '20rem',
                  }}
                >
                  <Button type="normal">Normal</Button>
                  <Button type="primary">Primary</Button>
                  <Button type="secondary">Secondary</Button>
                </Button.Group>
              </DemoItem>
              <DemoItem>
                <Button.Group
                  style={{
                    marginBottom: '20rem',
                  }}
                  block
                >
                  <Button type="normal" size="large">
                    Normal
                  </Button>
                  <Button type="primary" size="large">
                    Primary
                  </Button>
                  <Button type="secondary" size="large">
                    Secondary
                  </Button>
                </Button.Group>
              </DemoItem>
            </Demo>
          </DemoSection>
        </DemoContainer>
      </StyleProvider>
    );
  }
};
const styles = {
  wrapper: {
    padding: '20rem',
  },
  st: {
    marginTop: '30rem',
    marginBottom: '30rem',
    paddingTop: '10rem',
    paddingBottom: '10rem',
    paddingLeft: '20rem',
    backgroundColor: '#dddddd',
  },
  stText: {
    fontSize: '36rem',
  },
  btn: {
    marginRight: '20rem',
  },
  btnblock: {
    marginBottom: '20rem',
    flex: 1,
  },
};

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

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

initDemo('button');