/** @jsx createElement */

'use strict';

import { createElement, Component, render } from 'rax';
import Image from 'nuke-image';
import Touchable from 'nuke-touchable';
import Tabbar from 'nuke-tabbar';

const tradeType = ['all', 'dfk', 'dfh', 'yfh', 'finished', 'closed', 'refund', 'xypj', 'mjwp', 'today', 'yesterday', 'last7Day'];

const tabJson = [

  // {opt: 'all', name: '全部',count:10},
  // {opt:'today', name: '今日',count:0},
  // {opt: 'yesterday',name: '昨日',count:8},
  // {opt: 'last7Day', name: '近7天',count:3}
  { opt: 'dfk', name: '待付款', count: 10 },
  { opt: 'dfh', name: '待发货', count: 0 },
  { opt: 'yfh', name: '已发货', count: 11 },
  { opt: 'xypj', name: '待评价', count: 99 },
  { opt: 'finish', name: '已完成', count: 8 },
  { opt: 'closed', name: '已关闭', count: 2 },

];

class Navigation extends Component {
  constructor(props) {
    super(props);

    this.state = {
      opt: 'all',
      tabArr: tabJson,
      activeKey: 'all',
    };
  }
    renderContent = i => (
      <View style={[styles.tabContent]}>
        <Text style={styles.tabText}>法瓦而发</Text>
      </View>
    )
    renderTitle(item, status) {
      return (
        <View style={[styles.rowRow, styles.rowCenter]}>
          <Text style={(status ? [styles.rowNormal, styles.red] : styles.rowNormal)}>
            {item.name}
          </Text>&nbsp;
          <Text style={[(status ? [styles.rowNormal, styles.red] : styles.rowNormal), styles.rowLittle]}>
            {item.count == 0 ? item.count.toString() : item.count}
          </Text>
        </View>
      );
    }

    renderItem() {
      const items = [];
      for (let i = 0; i <= this.state.tabArr.length - 1; i++) {
        const item = this.state.tabArr[i];
        items.push(

        );
      }
      return (
        items
      );
    }


    onChange(status) {
      this.setState({
        activeKey: status.next,
        opt: this.state.tabArr[status.next].opt,
      });
    }

    render() {
      return (
        <View style={styles.main}>
          <Tabbar
            activeKey={0}
            itemStyle={styles.tabbar}
            navStyle={{ active: (Object.assign(styles.boxActive, styles.boxBasics)), inactive: (Object.assign(styles.boxInactive, styles.boxBasics)) }}
            navScrollable
            onChange={this.onChange.bind(this)}
          >
            {
              this.state.tabArr.map((item, index) => (<Tabbar.Item
                render={(status, key) => (this.renderTitle(item, status))}
                tabKey={index}
              >
                <View style={[styles.tabContent]}>
                  <Text style={styles.tabText}>page {index}</Text>
                </View>
              </Tabbar.Item>))
            }
          </Tabbar>
        </View>
      );
    }
}

const styles = {
  main: { flex: 1 },
  tabbar: {
    width: '670rem',
    marginLeft: '40rem',
    marginRight: '40rem',
  },
  boxActive: {
    borderBottomWidth: '4rem',
    borderBottomStyle: 'solid',
    borderBottomColor: '#e33b3f',
  },
  boxInactive: {
    borderBottomWidth: '4rem',
    borderBottomStyle: 'solid',
    borderBottomColor: 'transparent',
  },
  boxBasics: {
    width: '167.5rem',
    justifyContent: 'center',
  },
  rowRow: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'stretch',
    flex: 1,
  },
  rowCenter: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  rowNormal: {
    fontSize: '28rem',
    color: '#333333',
  },
  red: {
    color: '#e33b3f',
  },
  rowLittle: {
    fontSize: '20rem',
  },
  tabContent: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  tabText: {
    fontSize: '40rem',
  },


};

render(<Navigation />);