var React = require('react-native')

var rebound = require('rebound')

// custom component

var PageScrollView = require('./PageScrollView')

var PageNavBar = require('./PageNavBar')

var PageListView = require('./PageListView')

var window = require('../util/window')

var { width, height } = window.get()

var {

View,

StyleSheet,

ScrollView,

Component,

Text,

StatusBarIOS,

Image,

ListView,

TouchableHighlight,

Navigator,

AsyncStorage

} = React

class TopicsInTab extends Component {

constructor(props) {

super(props);

this.navs = ['精华', '问答', '主页', '分享', '招聘'];

this.totalPages = this.navs.length;

this.tabs = ['good', 'ask', 'all', 'share', 'job'];

this.space = (width - (60 * 3)) / 2 + 60;

var pageIndex = 2;

var pageScrollContentWidth = width * pageIndex;

var pageNavBarWith = (this.space / width) * pageScrollContentWidth;

var pageNavBarOffset = (pageIndex * width / pageScrollContentWidth) * pageNavBarWith;

this.state = {

pageIndex: pageIndex,

navBarOffset: pageNavBarOffset

}

}

componentWillMount() {

this.springSystem = new rebound.SpringSystem()

this._scrollSpring = this.springSystem.createSpring()

this._updateSpringConfig(this.props)

this._scrollSpring.addListener({

onSpringUpdate: () => {

var currentValue = this._scrollSpring.getCurrentValue()

var space = this.space

var offset = currentValue.offset

var pageScrollContentWidth = currentValue.contentWidth

if (offset < 0 || offset > pageScrollContentWidth - width) {

return

}

var pageNavBarWith = (space / width) * pageScrollContentWidth

var pageNavBarOffset = (offset / pageScrollContentWidth) * pageNavBarWith

this._pageNavBar.updateNav(pageNavBarOffset)

}

});

}

componentDidMount() {

this._scrollSpring.setCurrentValue({

offset: this.state.pageIndex * width,

contentWidth: 0

});

}

_updateSpringConfig(props) {

var springConfig = this._scrollSpring.getSpringConfig();

springConfig.tension = rebound.OrigamiValueConverter.tensionFromOrigamiValue(props.springTension || 25)

springConfig.friction = rebound.OrigamiValueConverter.frictionFromOrigamiValue(props.springFriction || 8)

this._scrollSpring.setOvershootClampingEnabled((typeof props.clampSpring === 'undefined') ? true : props.clampSpring)

}

shouldComponentUpdate(nextProps, nextState) {

if (nextProps.topic !== this.props.topic) {

return true

}

return false

}

_pageScrollViewOnScroll(e) {

var offset = e.nativeEvent.contentOffset.x

this._scrollSpring.setCurrentValue({

offset: offset,

contentWidth: e.nativeEvent.contentSize.width

})

}

_onNavItemPress(index) {

var {offset} = this._scrollSpring.getCurrentValue()

if (offset % width == 0) {

var currentIndex = offset / width

if (currentIndex == index) {

this['_pageListView_' + index] && this['_pageListView_' + index].scrollToTop()

}

this._pageScrollView.scrollTo(index * width, Math.abs(currentIndex - index))

}

}

_renderPageListView() {

var navs = this.navs

var tabs = this.tabs

var space = this.space

return navs.map((nav, index) => {

var tab = tabs[index]

return (

<PageListView

ref={view => {this['_pageListView_'+index]=view}}

key={'listView'+index}

navs={navs}

space={space}

data={this.props.topic[tab].topics}

actions={this.props.actions}

tab={this.props.topic[tab]}

router={this.props.router}

/>

)

})

}

render() {

return (

<View>

<PageNavBar

navBarOffset={this.state.navBarOffset}

pageIndex={this.state.pageIndex}

space={this.space}

navs={this.navs}

totalPages={this.totalPages}

onItemPress={this._onNavItemPress.bind(this)}

ref={view => {this._pageNavBar=view}}>

</PageNavBar>

<PageScrollView

ref={view => {this._pageScrollView=view}}

pageIndex={this.state.pageIndex}

totalPages={this.totalPages}

onScroll={this._pageScrollViewOnScroll.bind(this)}

onScrollBeginDrag={this._pageScrollViewOnScroll.bind(this)}

>

{this._renderPageListView()}

</PageScrollView>

</View>

)

}

}

module.exports = TopicsInTab