import {
	View,
	Text,
	StyleSheet,
	Image,
	ImageBackground,
	TouchableOpacity,
	FlatList
} from 'react-native'
import React, {Component} from 'react'
import {NavigationBarHeight, TabBarHeight, ScreenDimensions} from '../../../../utils/DimensionsTools'

export default class AnswerQuestionCommentItem extends Component {
	constructor(props) {
		super(props)
		this.state = {
			headerImageUrl: props.headerImageUrl,
			likes: props.likes,
			shares: props.shares,
			commentCount: props.commentCount,
			userName: props.userName,
			commentContent: props.commentContent,
			read: props.read
		}
	}

	componentWillReceiveProps(props) {
		this.setState({
			headerImageUrl: props.headerImageUrl,
			likes: props.likes,
			shares: props.shares,
			commentCount: props.commentCount,
			userName: props.userName,
			commentContent: props.commentContent,
			read: props.read
		})
	}

	shouldComponentUpdate(nextProps) {
		if (nextProps.headerImageUrl !== this.state.headerImageUrl ||
			nextProps.likes !== this.state.likes ||
				nextProps.shares !== this.state.shares ||
				nextProps.commentCount !== this.state.commentCount ||
				nextProps.userName !== this.state.userName ||
			nextProps.commentContent !== this.state.commentContent ||
				nextProps.read !== this.state.read
		) {
			return true
		}

		return false
	}

	render() {
		return(
			<View style={styles.View}>
				<View style={styles.UserInfoBgView}>
					<ImageBackground source={require('../../../../resources/images/TabBar/Community/Answer/user.png')} style={styles.UserHeaderImageView}>
						{/*<Image style={styles.UserHeaderTagImageView}/>*/}
					</ImageBackground>
					<Text style={styles.UserName}>{this.state.userName}</Text>
				</View>

				<Text style={styles.TitleText}>{this.state.commentContent}</Text>

				<Text style={styles.ReadNumberText}>{this.state.read + '阅读'}</Text>

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

					<TouchableOpacity onPress={() => {
						this.props.clickItemBottomButton(0)
					}} style={styles.BottomButtonView}>
						<Image source={require('../../../../resources/images/TabBar/Community/Answer/like.png')} style={[styles.BottomButtonImageView, {marginLeft: 48}]}/>
						<Text style={styles.BottomButtonText}>{this.state.likes}</Text>
					</TouchableOpacity>

					<TouchableOpacity style={styles.BottomButtonView}>
						<Image source={require('../../../../resources/images/TabBar/Community/Answer/mess.png')} style={styles.BottomButtonImageView}/>
						<Text style={styles.BottomButtonText}>{this.state.commentCount}</Text>
					</TouchableOpacity>

					<TouchableOpacity style={styles.BottomButtonView}>
						<Image source={require('../../../../resources/images/TabBar/Community/Answer/Forward.png')} style={[styles.BottomButtonImageView]}/>
						<Text style={[styles.BottomButtonText, {marginRight: 48}]}>{this.state.shares}</Text>
					</TouchableOpacity>
				</View>

			</View>
		)
	}
}

const styles = StyleSheet.create({
	View: {
		width: ScreenDimensions.width,
		backgroundColor: 'white',
	},
	UserInfoBgView: {
		marginTop: 13,
		width: ScreenDimensions.width,
		flexDirection: 'row',
		alignItems: 'center',
	},
	UserHeaderImageView: {
		width: 48,
		height: 48,
		borderRadius: 24,
		backgroundColor: 'red',
		marginLeft: 24,
	},
	UserHeaderTagImageView: {
		height: 9,
		width: 9,
		backgroundColor: 'blue',
		position: 'absolute',
		bottom: 0,
		right: 0,
	},
	UserName: {
		fontSize: 15,
		color: '#505050',
		marginLeft: 27
	},
	TitleText: {
		fontSize: 15,
		color: '#000000',
		marginLeft: 24,
		marginTop: 14,
	},
	ReadNumberText: {
		fontSize: 15,
		color: '#9c9c9c',
		marginLeft: 24,
		marginTop: 20,
	},
	BottomTagBgView: {
		marginTop: 24,
		width: ScreenDimensions.width,
		height: 56,
		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: '#9c9c9c'
	},
	BottomLineView: {
		position: 'absolute',
		width: ScreenDimensions.width,
		height: 0.5,
		backgroundColor: '#d7d7d7',
		left: 0,
		top: 0,
	},
})