/** @jsx createElement */
import { createElement, Component, render } from 'rax';
import View from 'nuke-view';
import Text from 'nuke-text';
import Touchable from 'nuke-touchable';
import Badge from 'nuke-badge';
import ListView from 'nuke-list-view';
import Icon from 'nuke-icon';
import Page from 'nuke-page';


const App = class NukeDemoIndex extends Component {
  constructor() {
    super();
    this.state = {
      arr1: [
        { key: 'a0', text: '所有类别' },
        { key: 'a1', text: '所有类别', arrow: true },
        { key: 'a2', text: '所有类别', arrow: true, sub: '请选择' },
      ],
    };
  }
  linkTo(item, e) {
    console.log(e);
  }

  renderItem(length, item, index) {
    const wrapStyle = index === length - 1 ? [styles.cellItem, styles.cellItemLast] : styles.cellItem;
    return (
      <View style={wrapStyle}>
        <Badge style={styles.badgeStyle}><Icon type="comments" /></Badge>

        <Touchable style={[styles.cellInner, index === length - 1 ? styles.cellInnerLast : {}]} onPress={this.linkTo.bind(this, item)}>
          <Text style={styles.itemTextList}>{item.text}</Text>
          {
            item.arrow ? <Icon name="arrowRight" style={styles.arrow} /> : null
          }
        </Touchable>
      </View>
    );
  }

  render() {
    return (
      <Page title="Badge">
        <Page.Intro main="Badge-dot" sub="normal" />
        <View style={styles.containerWithMargin}>
          <View style={styles.item}>
            <Text style={styles.text}>列表项</Text>
            <Badge style={{ position: 'absolute', top: '14rem', left: '110rem' }}><Icon type="comments" /></Badge>
          </View>
        </View>
        <Page.Intro sub="unread" />
        <ListView
          renderRow={this.renderItem.bind(this, this.state.arr1.length)}
          dataSource={this.state.arr1}
          style={styles.list1}
        />
        <Page.Intro main="Badge-number" sub="normal" />
        <View style={styles.containerWithMargin}>
          <View style={styles.item}>
            <Text style={styles.text}>列表项</Text>
            <Badge style={{ position: 'absolute', top: '4rem', left: '110rem' }} count={722} max={222} />
          </View>
        </View>

      </Page>

    );
  }
};
const styles = {
  containerWithMargin: {
    marginTop: '30rem', // #1170bc;
    marginBottom: '30rem', // #1170bc;
    marginLeft: '42rem', // #1170bc;
    marginRight: '42rem', // #1170bc;
  },
  item: {

  },
  text: {
    fontSize: '32rem',
  },
  list1: {
    height: `${104 * 3 + 2}rem`,
    marginTop: '35rem',
  },
  cellItem: {
    backgroundColor: '#ffffff',
    'backgroundColor:active': '#f2f3f7',
    height: '104rem',
    paddingLeft: '50rem',

  },
  cellInner: {
    flex: 1,
    borderBottomWidth: '2rem',
    borderBottomStyle: 'solid',
    borderBottomColor: '#e6e7eb',
    alignItems: 'center',
    flexDirection: 'row',
  },
  cellInnerLast: {
    borderBottomWidth: '0rem',
  },
  cellItemLast: {
    // backgroundColor:"#ffffff",
    // height:"104rem",
    borderBottomWidth: '2rem',
    borderBottomStyle: 'solid',
    borderBottomColor: '#e6e7eb',
    // paddingLeft:"30rem",
    // alignItems:"center",
    // flexDirection:"row"
  },
  badgeStyle: {
    position: 'absolute',
    top: '38rem',
    left: '20rem',
  },
  itemTextList: {
    fontSize: '32rem',
    color: '#5F646E',
  },
  arrow: {
    color: '#c7c7cc',
    position: 'absolute',
    top: '40rem',
    right: '24rem',
  },
};
render(<App />);