/**
 * Created by zack on 2018/4/29.
 */
import {
	View,
	Text,
	StyleSheet,
	Image,
	TouchableOpacity,
	FlatList,
	Platform
} from 'react-native'
import React, {Component} from 'react'
import {NavigationBarHeight, TabBarHeight, ScreenDimensions} from '../../../../utils/DimensionsTools'
import {CachedImage} from 'react-native-img-cache'
import ImageLoader from 'react-native-smart-image-loader'

export default class AnswerQuestionItem extends Component {
	constructor(props) {
		super(props)
		this.state = {
			title: props.title,
			subTitle: props.subTitle,
			imageUrls: props.imageUrls,
			commentCount: props.commentCount,
			likes: props.likes
		}
	}

	componentWillReceiveProps(props) {
		this.setState({
			title: props.title,
			subTitle: props.subTitle,
			imageUrls: props.imageUrls,
			commentCount: props.commentCount,
			likes: props.likes
		})
	}

	shouldComponentUpdate(nextProps) {
		if (nextProps.title !== this.state.title ||
			nextProps.subTitle !== this.state.subTitle ||
				nextProps.imageUrls !== this.state.imageUrls ||
				nextProps.commentCount !== this.state.commentCount ||
				nextProps.likes !== this.state.likes
		) {
			return true
		}

		return false
	}

	renderImageViews() {
		let imageViews = []

		for (let i = 0; i < this.state.imageUrls.length; i ++) {
			let imageLoader =	(
				<ImageLoader
					key = {i}
					style={[styles.ImageView, {marginBottom: (i < 3 ? 8 : 0), marginRight: (i > 0 && (i+ 1)%3 === 0) ? 0 : 8}]}
					options={{
						src: this.state.imageUrls[i],
					}}
				/>)
			imageViews.push(imageLoader)
		}
		return imageViews
	}

	render() {
		let desc = this.state.commentCount + '人回答' + '   ' + this.state.likes + '人收藏'
		return(
			<View style={styles.View}>
				<Text style={styles.TitleText}>{this.state.title}</Text>
				<Text style={styles.SubTitleText}>{this.state.subTitle}</Text>

				<View style={styles.ImageContainerView}>
					{this.renderImageViews()}
				</View>

				<Text style={styles.AnswerNumberText}>{desc}</Text>
				<View style={styles.BottomLineView} />
			</View>
		)
	}
}

const styles = StyleSheet.create({
	View: {
		width: ScreenDimensions.width,
		backgroundColor: 'white'
	},
	TitleText: {
		marginTop: 25,
		fontSize: 17,
		color: '#000000',
		marginLeft: 22,
		marginRight: 22,
	},
	SubTitleText: {
		marginTop: 22,
		fontSize: 15,
		color: '#505050',
		marginLeft: 22,
		marginRight: 22,
	},
	AnswerNumberText: {
		marginLeft: 24,
		marginTop: 22,
		fontSize: 15,
		color: '#9c9c9c',
		marginBottom: 13,
	},
	BottomLineView: {
		position: 'absolute',
		width: ScreenDimensions.width,
		height: 0.5,
		backgroundColor: '#d7d7d7',
		left: 0,
		bottom: 0,
	},
	ImageContainerView: {
		marginTop: 30,
		width: ScreenDimensions.width - 30,
		marginLeft: 15,
		flexDirection: 'row',
		flexWrap: 'wrap'
	},
	ImageView: {
		width: (ScreenDimensions.width - 30 - 16)/3.0,
		height: (ScreenDimensions.width - 30 - 16)/3.0,
	}
})