/**
 * Created by zack on 2018/4/29.
 */
import {
	View,
	Text,
	StyleSheet,
	Image,
	TouchableOpacity,
	FlatList
} from 'react-native'
import React, {Component} from 'react'
import {NavigationBarHeight, TabBarHeight, ScreenDimensions} from '../../../utils/DimensionsTools'
import AnswerPageViewListItem from './View/AnswerPageViewListItem'
import UserHeaderView from './View/UserHeaderView'
import HttpTools from '../../../network/HttpTools'
import {auth, question} from '../../../network/API'

export default class AnswerPageView extends Component {
	constructor(props) {
		super(props)
		this.state = {
			dataSources: [],
		}
	}

	getQuestionList() {
		const param = ({
			page: 1,
			limit: 20
		})

		HttpTools.get(question, param, (response) => {
			if (response && response.length) {
				this.setState({dataSources: response})
			}
		}, (error) => {

		})
	}

	renderItem(item) {
		return(
			<AnswerPageViewListItem
				title = {item.title}
				imageUrls= {item.img_urls}
				likes= {item.likes && item.likes.length}
				didSelectedItem = {() => {
					this.props.didSelectedItem(item.id)
				}}
			/>
		)
	}
	render() {
		return(
			<View style={styles.View}>
				<UserHeaderView
					didClickUserHeaderView = {() => {
						this.props.didClickUserHeaderView()
					}}
				/>
				<View style={styles.TagBgView}>
					<TouchableOpacity onPress={() => {
						this.props.didClickTagButton(0)
					}} style= {styles.TagButtonView}>
						<Image source={require('../../../resources/images/TabBar/Community/Answer/ques.png')} style={styles.TagButtonImageView}/>
						<Text style={styles.TagButtonTitleText}>{'提问'}</Text>

					</TouchableOpacity>

					<TouchableOpacity onPress={() => {
						this.props.didClickTagButton(1)
					}} style= {styles.TagButtonView}>
						<View style={[styles.TagLeftLineView, {left: 0,}]} />
						<Image source={require('../../../resources/images/TabBar/Community/Answer/ques.png')} style={styles.TagButtonImageView}/>
						<Text style={styles.TagButtonTitleText}>{'回答'}</Text>
						<View style={[styles.TagLeftLineView, {right: 0,}]} />
					</TouchableOpacity>

					<TouchableOpacity  onPress={() => {
						this.props.didClickTagButton(2)
					}} style= {styles.TagButtonView}>
						<Image source={require('../../../resources/images/TabBar/Community/Answer/ques.png')} style={styles.TagButtonImageView}/>
						<Text style={styles.TagButtonTitleText}>{'发现'}</Text>
					</TouchableOpacity>
				</View>

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

			</View>
		)
	}
}

const styles = StyleSheet.create({
	View: {
		width: ScreenDimensions.width,
		height: ScreenDimensions.height - NavigationBarHeight.height - TabBarHeight.height,
		backgroundColor: '#ffffff',
	},
	TagBgView: {
		width: ScreenDimensions.width,
		height: 56,
		flexDirection: 'row',
		justifyContent: 'space-between',
		backgroundColor: '#eef0ef'
	},
	TagButtonView: {
		width: ScreenDimensions.width/3.0,
		height: 48,
		alignItems: 'center',
		justifyContent: 'center',
		flexDirection: 'row',
		backgroundColor: '#ffffff'
	},
	TagButtonImageView: {
		width: 17,
		height: 17,
	},
	TagButtonTitleText: {
		fontSize: 15,
		color: '#27211c',
		marginLeft: 9,
	},
	TagLeftLineView: {
		height: 30,
		top: 9,
		width: 1,
		backgroundColor: '#d7d7d7',
		position: 'absolute'
	},
	ListView: {
		height: ScreenDimensions.height - NavigationBarHeight.height - TabBarHeight.height - 56 - 78,
		width: ScreenDimensions.width
	}
})