/** @jsx createElement */
import { createElement, Component, render } from 'rax';
import View from 'nuke-view';
import Text from 'nuke-text';
import { Iconfont, formatUnicode } from 'nuke-iconfont';
import { MultiRow } from 'nuke-layout';
import Page from 'nuke-page';

const App = class NukeDemoIndex extends Component {
  constructor() {
    super();
    this.state = {
      gridData: [
        { icon: formatUnicode('\ue60f'), name: '直播' },
        { icon: formatUnicode('\ue608'), name: '消息' },
        { icon: formatUnicode('&#xe606'), name: '浏览' },
        { icon: formatUnicode('&#e600;'), name: '时间' },
        { icon: '\ue605', name: '圆点' },
        { icon: '\ue607', name: '感叹号' },
        { icon: '\ue603', name: '上' },
        { icon: '\ue604', name: '下' },
      ],
    };
  }

  componentDidMount() {
    Iconfont({
      name: 'iconfont1',
      url: 'https://at.alicdn.com/t/font_1474198576_7440977.ttf',
    });
  }
  renderGridCell = item => (
    <View style={styles.iconCell}>
      <Text style={styles.icon1}>{item.icon}</Text>
      <Text style={styles.iconCellText}>{item.name}</Text>
    </View>
  );
  render() {
    return (
      <Page title="Iconfont">
        <Page.Intro main="自定义你的 iconfont 集合" />
        <MultiRow
          style={styles.wrap}
          dataSource={this.state.gridData}
          rows={4}
          renderRow={this.renderGridCell}
        />
      </Page>
    );
  }
};

const styles = {
  wrap: {
    backgroundColor: '#ffffff',
  },
  iconCell: {
    paddingLeft: '40rem',
    paddingRight: '40rem',
    borderWidth: '1rem',
    borderStyle: 'solid',
    borderColor: '#dddddd',
    marginLeft: '-1rem',
    marginTop: '-1rem',
    height: '220rem',
    alignItems: 'center',
    justifyContent: 'center',
  },
  icon1: {
    fontFamily: 'iconfont1',
    fontSize: '38rem',
    marginBottom: '30rem',
    color: '#3089DC',
  },
  iconCellText: {
    fontSize: '20rem',
    color: '#999999',
    alignItems: 'center',
    marginBottom: '40rem',
  },
};
render(<App />);