/** @jsx createElement */
import { createElement, Component, render } from 'rax';
import View from 'nuke-view';
import Text from 'nuke-text';
import Icon from 'nuke-icon';
import { MultiRow } from 'nuke-layout';
import { StyleProvider } from 'nuke-theme-provider';
import {
  decodeVar,
  DemoContainer,
  DemoSection,
  Demo,
  DemoItem,
  initDemo,
} from '@alife/nuke-demo-helper';

const ICONS = [
  'right',
  'download',
  'accessory',
  'add',
  'minus',
  'camera',
  'close',
  'enter',
  'feedback-fill',
  'feedback',
  'homepage-fill',
  'homepage',
  'message-fill',
  'message',
  'picture',
  'info-fill',
  'info',
  'return',
  'scan',
  'setup-fill',
  'setup',
  'share',
  'success-fill',
  'success',
  'switch',
  'prompt',
  'tailor',
  'video',
  'warning-fill',
  'warning',
  'search',
  'packup',
  'unfold',
  'delete',
  'delete-fill',
];
const App = class NukeDemoIndex extends Component {
  constructor() {
    super();
  }
  renderGridCell = (item, index) => (
    <View style={styles.iconCell}>
      <Icon fixedFont style={styles.icon} name={item} />
      <Text style={styles.iconShowCode}>{item}</Text>
    </View>
  );

  render() {
    return (
      <StyleProvider style={decodeVar(this.props.variable)}>
        <DemoContainer>
          <DemoSection title="icons">
            <Demo>
              <DemoItem direction="column">
                <MultiRow
                  dataSource={ICONS}
                  rows={4}
                  renderRow={this.renderGridCell}
                />
              </DemoItem>
            </Demo>
          </DemoSection>
        </DemoContainer>
      </StyleProvider>
    );
  }
};
const styles = {
  icon: {
    fontSize: 40,
    marginBottom: 20,
  },
  iconCell: {
    justifyContent: 'center',
    height: '180rem',
    alignItems: 'center',
    borderWidth: '1rem',
    borderColor: '#eeeeee',
    borderStyle: 'solid',
  },
  new: {
    fontSize: 68,

    color: '#3089dc',
  },
  listLine: {
    marginLeft: '40rem',
    marginRight: '40rem',
    padding: '20rem',
    flexDirection: 'row',
    backgroundColor: '#ffffff',
  },
  lineWithMargin: {
    marginLeft: '40rem',
    marginRight: '40rem',
    backgroundColor: '#ffffff',
  },

  iconShowCode: {
    fontSize: 24,
    color: '#999999',
  },
};
window.renderDemo = function (lang, variable) {
  render(<App variable={variable} />);
};
window.THEME_VARIABLE = window.THEME_VARIABLE || {};
renderDemo('en-us', window.THEME_VARIABLE);

initDemo('icon');