/**
 * Created by zack on 2018/4/29.
 */
import {
	View,
	Text,
	StyleSheet,
	FlatList,
	TouchableOpacity,
	Image,
	ScrollView
} from 'react-native'
import React, {Component} from 'react'
import {NavigationBarHeight, TabBarHeight, ScreenDimensions} from '../../../utils/DimensionsTools'
import FindSearchResultItem from './View/FindSearchResultItem'
import BaseNavigationBarStyle from '../../base/BaseNavigationBarStyle'
import MyAnswerListPageView from './View/MyAnswerListPageView'

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

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

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

	render() {
		return(
			<View style={styles.View}>
				<TouchableOpacity style={[styles.TopButtonBgView, {marginTop: NavigationBarHeight.height}]}>
					<View style={styles.TopButtonReadBgView}>
						<Image source={require("../../../resources/images/TabBar/Community/Answer/eye-normal.png")} style={styles.TopButtonImageView} />
						<Text style={styles.TopButtonTitle}>{'回答获得2人阅读'}</Text>
					</View>
					<Text style={styles.TopButtonSubTitle}>{'本月共2人浏览'}</Text>
				</TouchableOpacity>

				<View style={styles.TopButtonCenterLineView}/>

				<TouchableOpacity style={styles.TopButtonBgView}>
					<View style={styles.TopButtonReadBgView}>
						<Image source={require("../../../resources/images/TabBar/Community/Answer/like-normal.png")} style={styles.TopButtonImageView} />
						<Text style={styles.TopButtonTitle}>{'回答获得2人点赞'}</Text>
					</View>
					<Text style={styles.TopButtonSubTitle}>{'本月共5人点赞'}</Text>
				</TouchableOpacity>

				<View style={styles.TagButtonBgView}>
					<TouchableOpacity onPress={() => {
						this.clickTagButtonActon(0)
					}} style={styles.TagButtonView}>
						<Text style={[styles.TagButtonText, {marginLeft: 23, color: this.state.currentPage === 0 ? '#ef1313' : '#000000'}]}>{'收藏'}</Text>
					</TouchableOpacity>

					<TouchableOpacity onPress={() => {
						this.clickTagButtonActon(1)
					}} style={styles.TagButtonView}>
						<Text style={[styles.TagButtonText, {color: this.state.currentPage === 1 ? '#ef1313' : '#000000'}]}>{'提问'}</Text>
					</TouchableOpacity>

					<TouchableOpacity onPress={() => {
						this.clickTagButtonActon(2)
					}} style={styles.TagButtonView}>
						<Text style={[styles.TagButtonText, {color: this.state.currentPage === 2 ? '#ef1313' : '#000000'}]}>{'回答'}</Text>
					</TouchableOpacity>

					<TouchableOpacity onPress={() => {
						this.clickTagButtonActon(3)
					}} style={styles.TagButtonView}>
						<Text style={[styles.TagButtonText, {color: this.state.currentPage === 3 ? '#ef1313' : '#000000'}]}>{'草稿'}</Text>
					</TouchableOpacity>
				</View>

				<ScrollView ref = {(o) => {
					this._scrollView = o
				}} onMomentumScrollEnd={(e) => {
					this.onAnimationEnd(e)
				}} horizontal={true} pagingEnabled={true} style={styles.ScrollView}>
					<MyAnswerListPageView
						selectedTagIndex = {0}
						dataSources =  {[{index: 0}, {index: 1}, {index: 2}, {index: 3}, {index: 4}, {index: 5}, {index: 6}, {index: 1}, {index: 2}]}
					/>
					<MyAnswerListPageView
						selectedTagIndex = {1}
						dataSources =  {[{index: 0}, {index: 1}, {index: 2}, {index: 3}, {index: 4}, {index: 5}, {index: 6}, {index: 1}, {index: 2}]}
					/>
					<MyAnswerListPageView
						selectedTagIndex = {2}
						dataSources =  {[{index: 0}, {index: 1}, {index: 2}, {index: 3}, {index: 4}, {index: 5}, {index: 6}, {index: 1}, {index: 2}]}
					/>

					<MyAnswerListPageView
						selectedTagIndex = {3}
						dataSources =  {[]}//{[{index: 0}, {index: 1}, {index: 2}, {index: 3}, {index: 4}, {index: 5}, {index: 6}, {index: 1}, {index: 2}]}
					/>
				</ScrollView>

			</View>
		)
	}
}

const styles = StyleSheet.create({
	View: {
		width: ScreenDimensions.width,
		height: ScreenDimensions.height,
		backgroundColor: '#efeff4',
	},
	TopButtonBgView: {
		width: ScreenDimensions.width,
		height: 78,
		justifyContent: 'center',
		backgroundColor: 'white'
	},
	TopButtonReadBgView: {
		marginLeft: 23,
		flexDirection: 'row',
		alignItems: 'center',
	},
	TopButtonImageView: {
		marginRight: 12,
	},
	TopButtonTitle: {
		fontSize: 17,
		color: '#505050'
	},
	TopButtonSubTitle: {
		fontSize: 15,
		color: '#9c9c9c',
		marginTop: 13,
		marginLeft: 53,
	},
	TopButtonCenterLineView: {
		width: ScreenDimensions.width,
		height: 0.5,
		backgroundColor: '#efeff4'
	},
	TagButtonBgView: {
		width: ScreenDimensions.width,
		height: 45,
		marginTop: 8,
		borderBottomColor: '#efeff4',
		borderBottomWidth: 0.5,
		backgroundColor: 'white',
		flexDirection: 'row',
		alignItems: 'center',
	},
	TagButtonView: {
		height: 45,
		justifyContent: 'center',
		alignItems: 'center'
	},
	TagButtonText: {
		fontSize: 16,
		marginRight: 36
	},
	ScrollView: {
		width: ScreenDimensions.width,
		height: ScreenDimensions.height - NavigationBarHeight.height - 78 - 78 - 45 - 10,
	}
})