/** @jsx createElement */
import {createElement, Component} from 'weex-rx';
import { View, Text,Image,TouchableHighlight,ScrollView} from 'nuke-components';
import { Button,Input,Icon,ListView } from 'nuke';
import { TabSlider } from 'nuke';
import {mount} from 'nuke-mounter';

const { Pane } = TabSlider;
let styles = {
  slider: {
    width: '750rem',
    position: 'relative',
    overflow: 'hidden',
    height: '452rem',
    backgroundColor: '#cccccc'
  },
  itemWrap: {
    width: '750rem',
    height: '352rem'
  },
  image: {
    width: '750rem',
    height: '352rem'
  },
  button: {
    marginTop: '20rem',
    width: '340rem',
    height: '80rem'
  },
  paginationStyle: {
    position: 'absolute',
    width: '750rem',
    height: '40rem',
    bottom: '20rem',
    left: 0,
    itemColor: 'rgba(255, 255, 255, 0.5)',
    itemSelectedColor: 'rgb(255, 80, 0)'
  },
  tab:{
    position:'relative',
    width:750,
    height:3000
  },
  tabBottom:{
    height:166,
    width:750,
    backgroundColor:'#333333',
    display:'flex',
    alignItems:'center',
    justifyContent:'middle'
  },
  barStyle:{
    backgroundColor:'#ffffff',
    height:200
  }
};

class NukeDemoIndex extends Component{
  constructor(props) {
    super(props);
    this.state =  {
            selectedTab: 'tab1',
            notifCount: 0,
            presses: 0,
            index:2,
            active:0
        };
  }

  sliderChange(index){
    console.log('slide-to', index);
  }

  btnClick(){
    console.log(this.state.active);
    this.setState({
      active:0
    })
  }

  _renderContent(color, pageText, num) {
      return (
        <View style={{ backgroundColor: color }}>
          <Text>{pageText}</Text>
        </View>
      );
  }

  render() {
      return (
        <View>
         <TabSlider width={750} height={1000} style={styles.barStyle} active={this.state.active}  index={this.state.index} onChange={this.sliderChange.bind(this)}>
            <Pane title={'首页'} icon={{src:'//img.alicdn.com/tfs/TB1cCLYMVXXXXXHXpXXXXXXXXXX-64-64.png',selected:'//img.alicdn.com/tfs/TB1MzYIMVXXXXXYXVXXXXXXXXXX-64-64.png'}} style={{width:750,height:1500,backgroundColor:'#414A8C'}}>
              <View>{this._renderContent('#414A8C', 'Blue Tab 大家好我是蓝色的区域')}</View>
            </Pane>  
            <Pane title={'个人'} icon={{src:'//img.alicdn.com/tfs/TB1aoTvMVXXXXaKaXXXXXXXXXXX-64-64.png',selected:'//img.alicdn.com/tfs/TB1AZ_yMVXXXXX8aXXXXXXXXXXX-64-64.png'}} style={{width:750,height:1200,backgroundColor:'#783E33'}}>
              <View style={styles.tab}>{this._renderContent('#783E33', 'Red Tab 大家好我是红色的区域', this.state.notifCount)}</View>
            </Pane>  
            <Pane title={'购物车1'} icon={{src:'//img.alicdn.com/tfs/TB1UsjYMVXXXXXaXpXXXXXXXXXX-64-64.png',selected:'//img.alicdn.com/tfs/TB12mLPMVXXXXa5XFXXXXXXXXXX-64-64.png'}} style={{width:750,height:1200}}>
              <View style={styles.tab}>{this._renderContent('#21551C', 'Green Tab 大家好我是绿色的', this.state.presses)}</View>
            </Pane>  
            <Pane title={'购物车2'} icon={{src:'//img.alicdn.com/tfs/TB1UsjYMVXXXXXaXpXXXXXXXXXX-64-64.png',selected:'//img.alicdn.com/tfs/TB12mLPMVXXXXa5XFXXXXXXXXXX-64-64.png'}} style={{width:750,height:1200}}>
              <View style={styles.tab}>{this._renderContent('#21551C', 'Green Tab 大家好我是绿色的', this.state.presses)}</View>
            </Pane> 
        </TabSlider>
        <Button onPress={this.btnClick.bind(this)}>切换tab至第一个</Button>
       </View> 
        )
  }
}
mount(<NukeDemoIndex/>, mountNode);