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

export default class FollowPageViewNavigationBar extends Component {
	constructor(props) {
		super(props)
		this.state = {
			userName: props.userName,
			userIcon: props.userIcon
		}
	}

	componentWillReceiveProps(props) {
		this.setState({
			userName: props.userName,
			userIcon: props.userIcon
		})
	}

	shouldComponentUpdate(nextProps) {
		if (nextProps.userName !== this.state.userName ||
			nextProps.userIcon !== this.state.userIcon
		) {
			return true
		}

		return false
	}

	renderUserIcon(userIcon) {
		if (userIcon && userIcon.length) {
			return(
				<View>
					<ImageBackground imageStyle = {{borderRadius: 18,}} source={{uri: userIcon}} style={[styles.TitleHeaderImageView, {flexDirection: 'column-reverse', alignItems: 'flex-end'}]}>
						<Image source={require('../../../../resources/images/TabBar/PicAndText/follow.png')}/>
					</ImageBackground>
				</View>
			)
		}else {
			return <View />
		}
	}

	render() {
		return (
			<View style={styles.View}>
				<View style={styles.NavigationBarView}>
					<TouchableOpacity onPress={() => {
						this.props.didClickLeftButton()
					}} style={styles.LeftView}>
						<Image source={require("../../../../resources/images/TabBar/Community/Follow/left.png")}/>
						<Text style={styles.LeftText}>{this.state.leftTitle}</Text>
					</TouchableOpacity>

					<View style={styles.TitleHeaderBgView}>
						{this.renderUserIcon(this.state.userIcon)}
						<Text style={styles.TitleHeaderUserName}>{this.state.userName}</Text>
					</View>

					<TouchableOpacity style={styles.RightButton}>
						<Image source={require('../../../../resources/images/TabBar/PicAndText/more.png')}/>
					</TouchableOpacity>

				</View>

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

const styles = StyleSheet.create({
	View: {
		position: 'absolute',
		left: 0,
		top: 0,
		height: NavigationBarHeight.height,
		width: ScreenDimensions.width,
		backgroundColor: "#ffffff",
		shadowColor: "#eeeeee",
		shadowOffset: {
			width: 0,
			height: -1
		},
		shadowRadius: 0,
		shadowOpacity: 1,
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'space-between',
		elevation: 5, //only for android
	},
	NavigationBarView: {
		marginTop: Platform.OS === 'ios' ? 20 : 0,
		width: ScreenDimensions.width,
		height: Platform.OS === 'ios' ? (NavigationBarHeight.height - 20) : NavigationBarHeight.height,
		flexDirection: 'row',
		justifyContent: 'center',
		alignItems: 'center',
	},
	LeftView: {
		left: 15,
		justifyContent: 'center',
		flexDirection: 'row',
		alignItems: 'center',
		position: 'absolute',
	},
	LeftText: {
		fontSize: 14,
		color: '#999999',
		marginLeft: 5,
	},
	BottomLineView: {
		width: ScreenDimensions.width,
		height: 0.5,
		backgroundColor: '#cacaca',
		position: 'absolute',
		left: 0,
		bottom: 0,
	},
	TitleHeaderBgView: {
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'center'
	},
	TitleHeaderImageView: {
		width: 36,
		height: 36,
		borderRadius: 16,
	},
	TitleHeaderUserName: {
		fontSize: 15,
		color: '#000000',
		marginLeft: 12
	},
	RightButton: {
		height: 30,
		width: 44,
		right: 20,
		flexDirection: 'row-reverse',
		position: 'absolute',
		alignItems: 'center'
	}
})