/**
 * Created by zack on 2018/5/22.
 */
import {
	View,
	Text,
	StyleSheet,
	Platform,
	ScrollView,
	FlatList,
	Image,
	TouchableOpacity
} from 'react-native'
import React, {Component} from 'react'
import {NavigationBarHeight, TabBarHeight, ScreenDimensions} from '../../../utils/DimensionsTools'
import BaseNavigationBarStyle from '../../base/BaseNavigationBarStyle'
import PicAndTextNavigationBar from './View/PicAndTextNavigationBar'
import PicAndTextDetailHeaderItem from './View/PicAndTextDetailHeaderItem'
import PicAndTextDetailCommentItem from './View/PicAndTextDetailCommentItem'
import HttpTools from '../../../network/HttpTools'
import {auth, question, imgText, comment} from '../../../network/API'

export default class PicAndTextDetailViewController extends Component {
	constructor(props) {
		super(props)
		this.state = {
			title: props.title,
			commentCount: 0,
			commentId: props.commentId,
			itemId: props.itemId,
			dataSources: [],
			userIcon: '',
			picItemUserName: '',
		}
	}

	componentDidMount() {
		this.getPicAndTextDetail()
	}

	createPicAndTextComment(modeId) {
		const param = JSON.stringify({
			content: "comment content",
			model_id: modeId,
			model_type: "img_txt",
			related_id: ""
		})

		HttpTools.post(comment, param, (response) => {
			console.log(response)
		}, (error) => {
			console.log(error)
		})
	}

	getPicAndTextDetail() {
		let url = imgText + '/' + this.state.itemId

		HttpTools.get(url, {}, (response) => {
			let headerItem = Object.assign({key: 0}, response)
			this.setState({picItemUserName: response.user_name ,userIcon: response.user_avatar,dataSources: [headerItem, {key: 1,}]})
			this.getPicAndTextCommentList()
		}, (error) => {

		})
	}

	getPicAndTextCommentList() {
		const param = {
			model_id: this.state.itemId,
			model_type: 'img_txt',
		}

		HttpTools.get(comment, param, (response) => {
			if (response && response.length) {
				let commentListWithIndex = response.map((item, index) => {
					return Object.assign(item, {key: index + 2})
				})
				this.setState({
					dataSources: this.state.dataSources.concat(commentListWithIndex),
					commentCount: commentListWithIndex.length,
				})
			}

		}, (error) => {

		})
	}


	didClickBottomButton(index) {
		if (index === 0) { //send message

		}else if (index === 1){// star

		}else if (index === 2) { //forward

		}else if (index === 3) { //add comment
			// this.props.navigator.showModal({
			// 	screen: 'QuestionCreateViewController',
			// 	title: '提问',
			// 	backButtonTitle: '',
			// 	passProps: {
			// 		questionName: '如何学习英语？'
			// 	},
			// 	navigatorStyle: BaseNavigationBarStyle
			// })

			this.createPicAndTextComment(this.state.itemId)
		}
	}

	didClickImageViewContainer(imageUrls) {
		this.props.navigator.push({
			screen: 'PicAndTextImageSwiperViewController',
			backButtonTitle: '',
			navigatorStyle:{
				navBarHidden: true,
				drawUnderNavBar: true,
				drawUnderTabBar: true,
			},
			passProps: {
				imageUrls: imageUrls
			},
		})
	}

	renderItem(item) {
		const index = item.key
		if (index === 0) {
			return(
				<PicAndTextDetailHeaderItem
					imageUrls = {item.urls}
					title = {item.text}
					didClickImageViewContainer = {() => {
						this.didClickImageViewContainer([])
					}}
				/>
			)
		}else if (index === 1) {
			return(
				<View style={{width: ScreenDimensions.width, height: 40, backgroundColor: 'white', alignItems: 'center', flexDirection: 'row'}}>
					<Text style={{marginLeft: 23,}}>{this.state.commentCount + '条评论'}</Text>
					<View style={{ width: ScreenDimensions.width, height: 0.5, backgroundColor: '#efeff4', position: 'absolute', left: 0, bottom: 0}} />
				</View>
			)
		}else{
			return(
				<PicAndTextDetailCommentItem
					title = {item.content}
					userName = {item.user_name}
					userIcon = {item.user_avatar}
					commentCount = {item.comment_count}
					likes = {item.likes}
					shares = {item.shares}
					isLiked = {item.is_liked}
				/>
			)
		}
	}
	render()  {
		return(
			<View style={styles.View}>
				<PicAndTextNavigationBar
					userIcon = {this.state.userIcon}
					userName = {this.state.picItemUserName}
					didClickLeftButton = {() => {
						this.props.navigator.pop()
					}}
				/>

				<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 style={styles.BottomBgView}>
					<TouchableOpacity onPress={() => {
						this.didClickBottomButton(3)
					}} style={styles.InputBgView}>
						<Image style={styles.PenImageView} source={require('../../../resources/images/TabBar/PicAndText/pen.png')}/>
						<Text style={styles.PlaceHolder}>{'写评论...'}</Text>
						<Image style={styles.EmojiImageView} source={require('../../../resources/images/TabBar/PicAndText/Express.png')}/>
					</TouchableOpacity>
					<View style={styles.RightIconsBgView}>
						<TouchableOpacity onPress={() => {
							this.didClickBottomButton(0)
						}} style={{marginRight: 30}}>
							<Image source={require('../../../resources/images/TabBar/PicAndText/mess.png')}/>
						</TouchableOpacity>

						<TouchableOpacity onPress={() => {
							this.didClickBottomButton(1)
						}}  style={{marginRight: 30}}>
							<Image source={require('../../../resources/images/TabBar/PicAndText/star.png')}/>
						</TouchableOpacity>

						<TouchableOpacity onPress={() => {
							this.didClickBottomButton(2)
						}} >
							<Image source={require('../../../resources/images/TabBar/PicAndText/Forward.png')}/>
						</TouchableOpacity>
					</View>
					<View style={styles.BottomTopLineView}/>
				</View>
			</View>
		)
	}
}

const styles = StyleSheet.create({
	View: {
		width: ScreenDimensions.width,
		height: ScreenDimensions.height,
		backgroundColor: 'white',
	},
	ListView: {
		width: ScreenDimensions.width,
		height: ScreenDimensions.height - NavigationBarHeight.height - 48,
		marginTop: NavigationBarHeight.height,
	},
	BottomBgView: {
		width: ScreenDimensions.width,
		height: 48,
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'space-between'
	},
	BottomTopLineView: {
		width: ScreenDimensions.width,
		height: 0.5, backgroundColor: '#efeff4',
		position: 'absolute',
		left: 0,
		top: 0
	},
	InputBgView: {
		width: ScreenDimensions.width - 22 - 30 - 140,
		height: 34,
		borderRadius: 17,
		backgroundColor: '#dedede',
		flexDirection: 'row',
		alignItems: 'center',
		marginLeft: 22
	},
	PenImageView: {
		marginLeft: 14,
	},
	PlaceHolder:{
		marginLeft: 8,
		fontSize: 16,
		color: '#3c3c3c'
	},
	RightIconsBgView: {
		flexDirection: 'row',
		alignItems: 'center',
		marginRight: 20,
	},
	EmojiImageView: {
		position: 'absolute',
		right: 10,
	}

})