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

export default class QuestionCreateViewController extends Component {
	static navigatorButtons = {
		leftButtons: [
			{
				title: '取消', // for a textual button, provide the button title (label)
				id: 'cancel', // id for this button, given in onNavigatorEvent(event) to help understand which button was clicked
				buttonColor: '#000000', // Optional, iOS only. Set color for the button (can also be used in setButtons function to set different button style programatically)
				buttonFontSize: 14, // Set font size for the button (can also be used in setButtons function to set different button style programatically)
			},

		],
		rightButtons: [
			{
				title: '下一步', // for a textual button, provide the button title (label)
				id: 'next', // id for this button, given in onNavigatorEvent(event) to help understand which button was clicked
				buttonColor: '#000000', // Optional, iOS only. Set color for the button (can also be used in setButtons function to set different button style programatically)
				buttonFontSize: 14, // Set font size for the button (can also be used in setButtons function to set different button style programatically)
			},

		]
	};

	constructor(props) {
		super(props)
		this.state = {
			questionName: props.questionName,
			questionTitle: ''
		}
	}

	hideTabBar() {
		this.props.navigator.toggleTabs({
			to:'hidden',
			animated: true
		})
	}

	componentDidMount() {
		this.props.navigator.setOnNavigatorEvent((event) => {
			if (event.type === 'NavBarButtonPress') { // this is the event type for button presses
				if (event.id === 'cancel') { // this is the same id field from the static navigatorButtons definition
					if (Platform.OS === 'ios') {
						this.props.navigator.dismissModal()
					}else {
						this.props.navigator.pop()
					}
				}
				if (event.id === 'next') {
					if (!this.state.questionTitle.length) {
						ToastMsg.show('请先输入您的问题')
						return;
					}

					this.props.navigator.push({
						screen: 'QuestionCreateAddImageViewController',
						title: '提问',
						backButtonTitle: '',
						passProps: {
							questionTitle: this.state.questionTitle
						},
						navigatorStyle: BaseNavigationBarStyle
					})
				}
			}
		})
	}

	render() {
		return(
			<View style={styles.View}>
				<TextInput underlineColorAndroid={'transparent'} onChangeText={(text) => {
					this.setState({questionTitle: text})
				}} defaultValue={this.state.questionName} placeholderTextColor={'#9c9c9c'} placeholder={'请输入问题'} style={styles.TextInput} />

				<TouchableOpacity>
					<Text style={styles.BottomText}>{'什么是一个好问题？'}</Text>
				</TouchableOpacity>
			</View>
		)
	}
}

const styles = StyleSheet.create({
	View: {
		width: ScreenDimensions.width,
		height: ScreenDimensions.height - NavigationBarHeight.height,
		backgroundColor: 'white'
	},
	TextInput: {
		marginTop: NavigationBarHeight.height,
		width: ScreenDimensions.width,
		height: 61,
		color: '#000000',
		fontSize: 16,
		textAlign: 'center',
		borderBottomWidth: 0.5,
		borderBottomColor: '#efeff4'
	},
	BottomText: {
		marginTop: 30,
		width: ScreenDimensions.width,
		textAlign: 'center',
		color: '#4396d7',
		fontSize: 12
	}
})