/** @jsx createElement */
import {createElement, Component} from 'weex-rx';
import { View, Text} from 'nuke-components';
import { Tabbar } from 'nuke';
import {mount} from 'nuke-mounter';

let App = class NukeDemoIndex extends Component {
    constructor() {
        super();
        this.state =  {
            selectedTab: 'redTab',
            notifCount: 3,
            presses: 0
        };

    }

    _renderContent(color, pageText, num) {
        return (
          <View style={[styles.tabContent, {backgroundColor: color}]}>
            <Text style={styles.tabText}>{pageText}</Text>
            <Text style={styles.tabText}>{num} re-renders of the {pageText}</Text>
          </View>
        );
    }

    render() {
      const renderTpl = <Text style={styles.customRender}>自定义</Text>

        return (
            <Tabbar iconBar={true} defaultTab={3}>
                <Tabbar.Item
                    render={renderTpl}
                    title="Blue Tab"
                    selected={this.state.selectedTab === 'blueTab'}
                    icon={{src: '//img.alicdn.com/tfs/TB1cCLYMVXXXXXHXpXXXXXXXXXX-64-64.png',selected:'//img.alicdn.com/tfs/TB1MzYIMVXXXXXYXVXXXXXXXXXX-64-64.png'}}
                    onPress={() => {
                    this.setState({
                      selectedTab: 'blueTab',
                    });
                  }}>
                  {this._renderContent('#414A8C', 'Blue Tab 大家好我是蓝色的区域')}
                </Tabbar.Item>
                <Tabbar.Item
                  title="Red Tab"
                  icon={{src: '//img.alicdn.com/tfs/TB1aoTvMVXXXXaKaXXXXXXXXXXX-64-64.png',selected:'//img.alicdn.com/tfs/TB1AZ_yMVXXXXX8aXXXXXXXXXXX-64-64.png'}}
                  badge={this.state.notifCount > 0 ? this.state.notifCount : undefined}
                  selected={this.state.selectedTab === 'redTab'}
                  onPress={() => {
                    this.setState({
                      selectedTab: 'redTab',
                      notifCount: this.state.notifCount + 1,
                    });
                  }}>
                  {this._renderContent('#783E33', 'Red Tab 大家好我是红色的区域', this.state.notifCount)}
                </Tabbar.Item>
                <Tabbar.Item
                  renderAsOriginal
                  title="More"
                  icon={{src: '//img.alicdn.com/tfs/TB1UsjYMVXXXXXaXpXXXXXXXXXX-64-64.png',selected:'//img.alicdn.com/tfs/TB12mLPMVXXXXa5XFXXXXXXXXXX-64-64.png'}}
                  selected={this.state.selectedTab === 'greenTab'}
                  onPress={() => {
                    this.setState({
                      selectedTab: 'greenTab',
                      presses: this.state.presses + 1
                    });
                  }}>
                  {this._renderContent('#21551C', 'Green Tab 大家好我是绿色的', this.state.presses)}
                </Tabbar.Item>
                 <Tabbar.Item
                  renderAsOriginal
                  title="More"
                  icon={{src: '//img.alicdn.com/tfs/TB1.rPuMVXXXXc1aXXXXXXXXXXX-64-64.png',selected:'//img.alicdn.com/tfs/TB1qW2uMVXXXXcUaXXXXXXXXXXX-64-64.png'}}
                  selected={this.state.selectedTab === 'greenTab'}
                  onPress={() => {
                    this.setState({
                      selectedTab: 'greenTab',
                      presses: this.state.presses + 1
                    });
                  }}>
                  {this._renderContent('#21551C', 'Green Tab 大家好我是绿色的', this.state.presses)}
                </Tabbar.Item>
            </Tabbar>
        );
    }
}
let styles = {
  tabContent: {
    flex: 1,
    alignItems: 'center',
  },
  tabText: {
    color: 'white',
    margin: 50,
  },
  customRender: {
    fontSize: '10rem',
    color: 'blue'
  }
};

mount(<App/>, mountNode);