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


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

	componentDidMount() {
		//this.getQuestionDetailById(this.state.questionId)
	}

	getQuestionDetailById(questionId) {
		HttpTools.get(question + '/' + questionId, {}, (response) => {
			if (!response) {
				return
			}

			let headerItem = Object.assign(response, {key: 0})
			this.setState({
				dataSources: this.state.dataSources.concat([headerItem]),
				questionTitle: response.title
			}, () => {
				this.getQuestionCommentListById(this.state.questionId)
			})
		}, (error) => {
			console.log(error)
		})
	}

	getQuestionCommentListById(questionId) {
		const param = {
			model_id: this.state.questionId,
			model_type: 'question',
			page: 1,
			limit: 10,
		}
		HttpTools.get(comment, param, (response) => {
			if (response && response.length) {
				let commentListWithIndex = response.map((item, index) => {
					return Object.assign(item, {key: index + 1})
				})
				this.setState({
					dataSources: this.state.dataSources.concat(commentListWithIndex),
				})
			}
		}, (error) => {

		})
	}

	crateQuestion() {
		this.props.navigator.showModal({
			screen: 'QuestionCreateViewController',
			title: '提问',
			backButtonTitle: '',
			passProps: {
				questionName: '如何学习英语？'
			},
			navigatorStyle: BaseNavigationBarStyle
		})
	}

	createAnswer() {
		this.props.navigator.showModal({
			screen: 'AnswerCreateViewController',
			title: '回答',
			backButtonTitle: '',
			passProps: {
				title: this.state.questionTitle,
				questionId: this.state.questionId
			},
			navigatorStyle: BaseNavigationBarStyle
		})
	}

	clickItemBottomButton(index) {
		
	}

	renderItem(item) {
		if (item.key === 0) {
			return(
				<AnswerQuestionItem
					title = {item.title}
					subTitle = {item.content}
					imageUrls = {item.img_urls}
					commentCount = {0}
					likes = {item.likes}
				/>
			)
		}else {
			return (
				<AnswerQuestionCommentItem
					headerImageUrl= {item.user_avatar}
					likes= {item.likes}
					shares= {item.shares}
					commentCount= {item.comment_count}
					userName= {item.user_name}
					commentContent= {item.content}
					read= {12}
					clickItemBottomButton = {(index) => {
						this.clickItemBottomButton(index)
					}}
				/>
			)
		}
	}

	render() {
		return(
			<View style={styles.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>

				<TouchableOpacity style = {styles.BottomTagBgView}>

					<TouchableOpacity onPress={() => {

					}} style={styles.BottomButtonView}>
						<Image source={require('../../../resources/images/TabBar/Community/Answer/doc.png')} style={[styles.BottomButtonImageView]}/>
						<Text style={styles.BottomButtonText}>{'更多'}</Text>
					</TouchableOpacity>

					<TouchableOpacity onPress={() => [
						this.crateQuestion()
					]} style={styles.BottomButtonView}>
						<Image source={require('../../../resources/images/TabBar/Community/Answer/fill.png')} style={styles.BottomButtonImageView}/>
						<Text style={styles.BottomButtonText}>{'提问'}</Text>
					</TouchableOpacity>

					<TouchableOpacity onPress={() => {
						this.createAnswer()
					}} style={styles.BottomButtonView}>
						<Image source={require('../../../resources/images/TabBar/Community/Answer/pen.png')} style={[styles.BottomButtonImageView]}/>
						<Text style={[styles.BottomButtonText,]}>{'回答'}</Text>
					</TouchableOpacity>

					<View style={styles.BottomLineView} />
				</TouchableOpacity>



			</View>
		)
	}
}

const styles = StyleSheet.create({
	View: {
		width: ScreenDimensions.width,
		height: ScreenDimensions.height,
		backgroundColor: 'white'
	},
	ListView: {
		marginTop: NavigationBarHeight.height,
		width: ScreenDimensions.width,
		height: ScreenDimensions.height - NavigationBarHeight.height - 48,
		backgroundColor: 'white'
	},
	BottomTagBgView: {
		width: ScreenDimensions.width,
		height: 48,
		backgroundColor: '#eef0ef',
		flexDirection: 'row',
	},
	BottomButtonView: {
		width: ScreenDimensions.width/3.0,
		height: 48,
		flexDirection: 'row',
		justifyContent: 'center',
		alignItems: 'center',
		backgroundColor: 'white'
	},
	BottomButtonImageView: {
		marginRight: 13,
	},
	BottomButtonText: {
		fontSize: 13,
		color: '#000000'
	},
	BottomLineView: {
		position: 'absolute',
		width: ScreenDimensions.width,
		height: 0.5,
		backgroundColor: '#d7d7d7',
		left: 0,
		top: 0,
	},

})