/**
 * Created by zack on 2018/4/20.
 */
import {
	View,
	Text,
	StyleSheet,
	TouchableOpacity
} from 'react-native'
import React, {Component} from 'react'

export default class BaseNavigationBarListItem extends Component {
	constructor(props) {
		super(props)
		this.state = {
			title: props.title,
			isSelected: props.isSelected
		}
	}

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

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

	render() {
		console.log(this.state.isSelected)
		return(
			<TouchableOpacity onPress={() => {
				this.props.didSelectedItem()
			}} style={styles.View}>
				<Text style={this.state.isSelected === true ? styles.TitleTextSelected : styles.TitleTextDeselected}>{this.state.title}</Text>
			</TouchableOpacity>
		)
	}
}

const styles = StyleSheet.create({
	View: {
		justifyContent: 'center',
		alignItems: 'center',
	},
	TitleTextDeselected: {
		fontSize: 14,
		color: "#333333",
		marginRight: 22
	},
	TitleTextSelected: {
		fontSize: 24,
		color: "#f01414",
		marginRight: 22
	}
})