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

const iconsMap = {
  tab1: {
    icon: '\ue650',
    name: '标题一',
  },
  tab2: {
    icon: '\ue631',
    name: '标题二',
  },
  tab3: {
    icon: '\ue65e',
    name: '标题三',
  },
  tab4: {
    icon: '\ue65d',
    name: '标题四',
  },
};

const App = class NukeDemoIndex extends Component {
  constructor() {
    super();
    Iconfont({ name: 'tabicons', url: '//at.alicdn.com/t/font_jw65w2xs3tm7k3xr.ttf' });
    this.state = {
      activeKey: 'tab1',
    };
  }
    renderContent = pageText => (
      <View style={[styles.tabContent]}>
        <Text style={styles.tabText}>{pageText}</Text>
      </View>
    )
    renderItem = (Name, isActive, key) => (<View style={styles.item}>
      <Text style={[styles.itemText, isActive ? styles.activeText : {}]}>{Name}</Text>
    </View>)
    renderItemScrollable = (Name, isActive, key) => (<View style={styles.itemFixWidth}>
      <Text style={[styles.itemText, isActive ? styles.activeText : {}]}>{Name}</Text>
    </View>)
    renderItemCapsule = (Name, isActive, key) => (<View style={styles.itemCapsule}>
      <Text style={[styles.itemTextCapsule, isActive ? styles.activeTextCapsule : {}]}>{Name}</Text>
    </View>)
    renderItemWithIcon = (iconName, isActive, key) => (<View style={styles.item}>
      <View style={[styles.itemIcon, isActive ? styles.itemIconActiveBg : {}]}>
        <Text style={[styles.icon, isActive ? styles.activeTextWithIcon : {}]}>{iconsMap[iconName].icon}</Text>
      </View>
      <Text style={[styles.itemText, isActive ? styles.activeText : {}]}>{iconsMap[iconName].name}</Text>
    </View>)
    render() {
      return (
        <Page title="Tabbar">
          <Page.Intro main="顶部" sub="无icon" />
          <View style={styles.tabWithoutContent}>
            <Tabbar navTop navStyle={{ active: styles.activeBorder, inactive: styles.inactiveBorder }} activeKey={this.state.activeKey}>
              <Tabbar.Item
                tabKey="tab1"
                render={this.renderItem.bind(this, '标题一')}
              />
              <Tabbar.Item
                tabKey="tab2"
                render={this.renderItem.bind(this, '标题二')}
              />
              <Tabbar.Item
                tabKey="tab3"
                render={this.renderItem.bind(this, '标题三')}
              />
              <Tabbar.Item
                tabKey="tab4"
                render={this.renderItem.bind(this, '标题四')}
              />
            </Tabbar>
          </View>

          <Page.Intro sub="可滚动" />
          <View style={styles.tabWithoutContent}>
            <Tabbar navTop navScrollable navStyle={{ active: styles.activeBorder, inactive: styles.inactiveBorder }} activeKey={this.state.activeKey}>
              <Tabbar.Item
                tabKey="tab1"
                render={this.renderItemScrollable.bind(this, '全部订单')}
              >
                {this.renderContent('全部订单')}
              </Tabbar.Item>
              <Tabbar.Item
                tabKey="tab2"
                render={this.renderItemScrollable.bind(this, '7天')}
              >
                {this.renderContent('7天')}
              </Tabbar.Item>
              <Tabbar.Item
                tabKey="tab3"
                render={this.renderItemScrollable.bind(this, '30天')}
              >
                {this.renderContent('30天')}
              </Tabbar.Item>
              <Tabbar.Item
                tabKey="tab4"
                render={this.renderItemScrollable.bind(this, '退款')}
              >
                {this.renderContent('退款')}
              </Tabbar.Item>
              <Tabbar.Item
                tabKey="tab5"
                render={this.renderItemScrollable.bind(this, '未发货')}
              >
                {this.renderContent('未发货')}
              </Tabbar.Item>
              <Tabbar.Item
                tabKey="tab6"
                render={this.renderItemScrollable.bind(this, '部分发货')}
              >
                {this.renderContent('部分发货')}
              </Tabbar.Item>
            </Tabbar>
          </View>

          <Page.Intro sub="胶囊式" />
          <View style={styles.tabWithoutContent}>
            <Tabbar capsule activeKey={this.state.activeKey}>
              <Tabbar.Item
                tabKey="tab1"
                render={this.renderItemCapsule.bind(this, '标题一')}
              />
              <Tabbar.Item
                tabKey="tab2"
                render={this.renderItemCapsule.bind(this, '标题二')}
              />


            </Tabbar>
          </View>
          <Page.Intro main="底部" sub="带icon" />
          <View style={styles.tabWithoutContent}>
            <Tabbar iconBar activeKey={this.state.activeKey}>
              <Tabbar.Item
                tabKey="tab1"
                render={this.renderItemWithIcon.bind(this, 'tab1')}
              />
              <Tabbar.Item
                tabKey="tab2"
                render={this.renderItemWithIcon.bind(this, 'tab2')}
              />
              <Tabbar.Item
                tabKey="tab3"
                render={this.renderItemWithIcon.bind(this, 'tab3')}
              />
              <Tabbar.Item
                tabKey="tab4"
                render={this.renderItemWithIcon.bind(this, 'tab4')}
              />
            </Tabbar>
          </View>
        </Page>

      );
    }
};
const styles = {
  tabWithoutContent: {
    marginTop: '20rem',
    height: '200rem',
  },

  container: {
    flex: 1,
  },
  item: {
    alignItems: 'center',
    justifyContent: 'center',
  },
  itemFixWidth: {
    width: '150rem',
    alignItems: 'center',
    justifyContent: 'center',
  },
  itemCapsule: {
    alignItems: 'center',
    justifyContent: 'center',
    width: '150rem',
  },
  itemText: {
    fontSize: '28rem',
    color: '#999999',
  },
  icon: {
    fontFamily: 'tabicons',
    fontSize: '32rem',
    color: '#999999',
  },
  itemIcon: {
    width: '48rem',
    height: '48rem',
    borderRadius: '24rem',
    marginBottom: '6rem',
    marginTop: '14rem',
    alignItems: 'center',
    justifyContent: 'center',
  },
  itemIconActiveBg: {
    backgroundColor: '#3089dc',
  },
  activeText: {
    color: '#3089dc',
  },
  activeTextWithIcon: {
    color: '#ffffff',
  },
  activeTextCapsule: {
    color: '#ffffff',
  },
  itemTextCapsule: {
    color: '#3089dc',
    fontSize: '32rem',
  },
  activeBorder: {
    borderBottomWidth: '1rem',
    borderBottomStyle: 'solid',
    borderBottomColor: '#3089dc',
  },
  inactiveBorder: {
    borderBottomWidth: '1rem',
    borderBottomStyle: 'solid',
    borderBottomColor: '#eeeeee',
  },
};

render(<App />);