/**
 * Created by zack on 2018/6/23.
 */
import {
	View,
	Text,
	StyleSheet,
	Image,
	ImageBackground,
	TouchableOpacity,
	FlatList
} from 'react-native'
import React, {Component} from 'react'
import {NavigationBarHeight, ScreenDimensions} from '../../../utils/DimensionsTools'

export default class MineHeaderImageItem extends Component {
	constructor(props) {
		super(props)
		this.state = {
			avatar: props.avatar
		}
	}

	componentWillReceiveProps(props) {
		this.setState({
			avatar: props.avatar
		})
	}

	shouldComponentUpdate(nextProps) {
		if (nextProps.avatar !== this.state.avatar) {
			return true
		}

		return false
	}

	render() {
		return(
			<TouchableOpacity onPress={() => {
				this.props.didSelectedItem()
			}} style={styles.View}>
				<Text style={styles.LeftText}>{'头像'}</Text>

				<View style={styles.ContainerView}>
					<Image style={styles.HeaderImageView} source={require('../../../resources/images/Mine/user.png')}/>
					<Image source={require('../../../resources/images/Mine/Right-Arrow.png')}/>
				</View>

				<View style={{position: 'absolute', width: ScreenDimensions.width, height: 0.5, backgroundColor: '#efeff4', left: 0, bottom: 0}} />
			</TouchableOpacity>
		)
	}
}

const styles = StyleSheet.create({
	View: {
		width: ScreenDimensions.width,
		height: 80,
		backgroundColor: '#f7f7f7',
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'space-between',
	},

	LeftText: {
		fontSize: 14,
		color: '#333333',
		marginLeft: 15,
	},
	ContainerView: {
		marginRight: 15,
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'center'
	},
	HeaderImageView: {
		width: 52,
		height: 52,
		borderRadius: 5,
		marginRight: 12,
	},


})