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

export default class LearnViewControllerNavigationBar extends Component {
	constructor(props) {
		super(props)
		this.state = {
			title: props.title,
			subTitle: props.subTitle,
			leftTitle: props.leftTitle
		}
	}

	componentWillReceiveProps(props) {
		this.setState({
			title: props.title,
			subTitle: props.subTitle,
			leftTitle: props.leftTitle
		})
	}

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

		return false
	}

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

					<View style={styles.TitleView}>
						<Text style={styles.TitleText}>{this.state.title}</Text>
						<Text style={styles.SubTitle}>{this.state.subTitle}</Text>
					</View>

					<Image style={styles.MineLeftLineImageView} source={require('../../resources/images/BaseNavigationBar/阴影分割.png')}/>
					<TouchableOpacity onPress={() => {
						this.props.didClickedMineItem()
					}} style={styles.MineBgView}>
						<Image style={styles.MineImageView} source={require('../../resources/images/BaseNavigationBar/icon-mine.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: 'space-between',
		alignItems: 'center',
	},
	LeftView: {
		marginLeft: 15,
		justifyContent: 'center',
		flexDirection: 'row',
		alignItems: 'center'
	},
	LeftText: {
		fontSize: 14,
		color: '#999999',
		marginLeft: 5,
	},
	TitleView: {
		flexDirection: 'row',
		alignItems: 'center',
	},
	TitleText: {
		fontSize: 18,
		color: '#333333',
		marginRight: 8
	},
	SubTitle: {
		fontSize: 14,
		color: '#999999'
	},
	MineBgView: {
		width: 	(Platform.OS === 'ios' ? 44 : 56),
		height: Platform.OS === 'ios' ? (NavigationBarHeight.height - 20) : NavigationBarHeight.height,
		flexDirection: 'row',
		alignItems: 'center',
	},
	MineImageView: {
		width: 	21,
		height: 22,
		marginLeft: Platform.OS === 'ios' ? 10 : 15
	},
	MineLeftLineImageView: {
		height: 30,
		width: 11,
		position: 'absolute',
		top: Platform.OS === 'ios' ? 9 : 13,
		right: Platform.OS === 'ios' ? 44 : 56
	},
	BottomLineView: {
		width: ScreenDimensions.width,
		height: 0.5,
		backgroundColor: '#cacaca',
		position: 'absolute',
		left: 0,
		bottom: 0,
	}
})