/**
 * Created by zack on 2018/5/2.
 */
import {
	View,
	Text,
	StyleSheet,
	Platform,
	ScrollView,
	FlatList
} from 'react-native'
import React, {Component} from 'react'
import {NavigationBarHeight, TabBarHeight, ScreenDimensions} from '../../../utils/DimensionsTools'
import BaseNavigationBarStyle from '../../base/BaseNavigationBarStyle'
import FollowPageViewNavigationBar from './View/FollowPageViewNavigationBar'
import RecommendItem from './View/RecommendItem'

export default class FollowListViewController extends Component {
	constructor(props) {
		super(props)
		this.state = {
			selectedTagIndex: 0,
		}
	}

	renderFamousListItem() {
		return(
			<RecommendItem />
		)
	}

	renderRecommendListItem() {
		return(
			<RecommendItem />
		)
	}

	// 监听滚动
	onAnimationEnd(e){
		// 求出水平方向上的偏移量
		const offSetX = e.nativeEvent.contentOffset.x
		// 计算当前页码
		const currentPage = offSetX / (ScreenDimensions.width)
		// 重新绘制UI
		this.setState({selectedTagIndex: currentPage})
	}

	didSelectedTagIndex(index) {
		let x = index * ScreenDimensions.width
		this.setState({selectedTagIndex: index})
		this._scrollView.scrollTo({x: x, y: 0, animated: true})
	}

	render() {
		return(
			<View style={styles.View}>
				<FollowPageViewNavigationBar
					selectedTagIndex = {this.state.selectedTagIndex}
					didSelectedTagIndex = {(index) => {
						this.didSelectedTagIndex(index)
					}}
					didClickLeftButton = {() => {
						this.props.navigator.pop()
					}}
				/>
				<ScrollView onMomentumScrollEnd={(e) => {
					this.onAnimationEnd(e)
				}} ref = {(o) => {this._scrollView = o}} horizontal={true} pagingEnabled={true} style = {styles.ScrollView}>
					<View style={styles.ListView}>
						<FlatList
							data = {['a', 'b', 'c']}
							renderItem={({item}) => this.renderRecommendListItem(item)}
							keyExtractor = {(item,index) =>{
								return 'key' + item.key + index
							}}
							ListFooterComponent = {() => {
								return(
									<View style={{width: ScreenDimensions.width, height: 44, backgroundColor: 'white'}} />
								)
							}}
						/>
					</View>

					<View style={styles.ListView}>
						<FlatList
							data = {['a', 'b', 'c']}
							renderItem={({item}) => this.renderFamousListItem(item)}
							keyExtractor = {(item,index) =>{
								return 'key' + item.key + index
							}}
							ListFooterComponent = {() => {
								return(
									<View style={{width: ScreenDimensions.width, height: 44, backgroundColor: 'white'}} />
								)
							}}
						/>
					</View>

				</ScrollView>
			</View>
		)
	}
}

const styles = StyleSheet.create({
	View: {
		width: ScreenDimensions.width,
		height: ScreenDimensions.height,
		backgroundColor: '#ffffff',
		alignItems: 'center',
	},
	ScrollView: {
		marginTop: NavigationBarHeight.height,
		width: ScreenDimensions.width,
		height: ScreenDimensions.height - NavigationBarHeight.height - TabBarHeight.height,
	},
	ListView: {
		width: ScreenDimensions.width,
		height: ScreenDimensions.height - NavigationBarHeight.height - TabBarHeight.height,
	},
})