/** @jsx createElement */
import { createElement, Component, render } from 'rax';
import View from 'nuke-view';
import Env from 'nuke-env';
import Dialog from 'nuke-dialog';
import { StyleProvider } from 'nuke-theme-provider';
import {
  decodeVar,
  DemoContainer,
  DemoSection,
  Demo,
  DemoItem,
  initDemo,
} from '@alife/nuke-demo-helper';

const msg =
  Env.appInfo.platform === 'iOS'
    ? 'A message should be a short, complete sentence.'
    : 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua. Up exlaborum incididunt.';

const App = class NukeDemoIndex extends Component {
  constructor() {
    super();
  }

  componentDidMount() {
    Dialog.confirm({
      title: 'A Short Title is Best',
      content: msg,
      locale: { confirm: 'Primary' },
      type: 'iOS',
      renderMask: false,
      container: this.refs.confirmRoot1,
    });

    Dialog.alert({
      title: 'A Short Title is Best',
      content: msg,
      locale: { confirm: 'Primary' },
      type: 'iOS',
      renderMask: false,
      container: this.refs.alertRoot1,
    });

    Dialog.alert({
      title: 'A longer title can extend over multiple lines',
      content: msg,
      locale: { confirm: 'Primary' },
      type: 'iOS',
      renderMask: false,
      container: this.refs.alertRoot2,
    });
    Dialog.confirm({
      title: 'A Short Title is Best',
      content: msg,
      locale: { confirm: 'Primary' },
      type: 'android',
      renderMask: false,
      container: this.refs.confirmRoot2,
    });

    Dialog.alert({
      title: 'A Short Title is Best',
      content: msg,
      type: 'android',
      locale: { confirm: 'Primary' },
      renderMask: false,
      container: this.refs.alertRoot3,
    });

    Dialog.alert({
      title: 'A longer title can extend over multiple lines',
      content: msg,
      type: 'android',
      locale: { confirm: 'Primary' },
      renderMask: false,
      container: this.refs.alertRoot4,
    });
  }

  render() {
    return (
      <StyleProvider style={decodeVar(this.props.variable)}>
        <DemoContainer>
          <DemoSection title="Alert iOS">
            <Demo>
              <DemoItem direction="column">
                <View ref="alertRoot1" style={styles.miniMask} />
              </DemoItem>
              <DemoItem direction="column">
                <View ref="alertRoot2" style={styles.miniMask} />
              </DemoItem>
            </Demo>
          </DemoSection>

          <DemoSection title="Confirm iOS">
            <Demo>
              <DemoItem direction="column">
                <View ref="confirmRoot1" style={styles.miniMask} />
              </DemoItem>
            </Demo>
          </DemoSection>
          <DemoSection title="Alert android">
            <Demo>
              <DemoItem direction="column">
                <View ref="alertRoot3" style={styles.miniMask} />
              </DemoItem>
              <DemoItem direction="column">
                <View ref="alertRoot4" style={styles.miniMask} />
              </DemoItem>
            </Demo>
          </DemoSection>

          <DemoSection title="Confirm android">
            <Demo>
              <DemoItem direction="column">
                <View ref="confirmRoot2" style={styles.miniMask} />
              </DemoItem>
            </Demo>
          </DemoSection>
        </DemoContainer>
      </StyleProvider>
    );
  }
};
const styles = {
  btn: {
    marginBottom: 30,
  },
  miniMask: {
    height: 600,
    backgroundColor: '#cccccc',
    alignItems: 'center',
    justifyContent: 'center',
  },
};
window.renderDemo = function (lang, variable) {
  render(<App variable={variable} />);
};

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

initDemo('dialog');