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

export default class PicAndTextDetailCommentItem extends Component {
	constructor(props) {
		super(props)
		this.state = {
			userName: props.userName,
			userIcon: props.userIcon,
			title: props.title,
			commentCount: props.commentCount,
			likes: props.likes,
			shares: props.shares,
			isLiked: props.isLiked
		}
	}

	componentWillReceiveProps(props) {
		this.setState({
			userName: props.userName,
			userIcon: props.userIcon,
			title: props.title,
			commentCount: props.commentCount,
			likes: props.likes,
			shares: props.shares,
			isLiked: props.isLiked
		})
	}

	shouldComponentUpdate(nextProps) {
		if (nextProps.userName !== this.state.userName ||
			nextProps.title !== this.state.title ||
			nextProps.commentCount !== this.state.commentCount ||
			nextProps.likes !== this.state.likes ||
			nextProps.shares !== this.state.shares ||
			nextProps.userIcon !== this.state.userIcon ||
			nextProps.isLiked !== this.state.isLiked
		) {
			return true
		}

		return false
	}

	render() {
		return(
			<View style={styles.View}>
				<ImageLoader
					style={[styles.HeaderImageView, {borderRadius: 24,}]}
					options={{
						src: this.state.userIcon,
					}}
				/>
				<View style={styles.CommentBgView}>
					<Text style={styles.UserName}>{this.state.userName}</Text>
					<Text style={styles.CommentContent}>{this.state.title}</Text>
					<Text style={styles.TimeText}>{'2018/12/27 18:00'}</Text>
				</View>

				<TouchableOpacity style={styles.LikeBgView}>
					<Image source={this.state.isLiked ? require('../../../../resources/images/TabBar/PicAndText/like_hover.png') : require('../../../../resources/images/TabBar/PicAndText/like.png')}/>
					<Text style={styles.LikeNumberText}>{this.state.likes}</Text>
				</TouchableOpacity>

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

const styles = StyleSheet.create({
	View: {
		width: ScreenDimensions.width,
		flexDirection: 'row',
		justifyContent: 'space-between',
		backgroundColor: 'white'
	},
	HeaderImageView: {
		width: 48,
		height: 48,
		marginLeft: 24,
		marginTop: 16,
	},
	CommentBgView: {
		marginLeft: 34,
		marginTop: 16,
		width: ScreenDimensions.width - 24 - 48 - 34 - 20 - 22,
		marginBottom: 16,
	},
	UserName: {
		fontSize: 15,
		color: '#000000',
	},
	CommentContent: {
		fontSize: 15,
		color: '#000000',
		marginTop: 15,
	},
	TimeText: {
		fontSize: 13,
		color: '#9c9c9c',
		marginTop: 12,
	},
	LikeBgView: {
		marginTop: 16,
		marginRight: 22,
	},
	LikeNumberText: {
		fontSize: 12,
		color: '#9c9c9c',
		marginTop: 8,
		textAlign: 'center'
	},
	BottomLineView: {
		width: ScreenDimensions.width,
		height: 0.5,
		backgroundColor: '#efeff4',
		position: 'absolute',
		left: 0,
		bottom: 0,
	}
})