'use strict';

import React from 'react';
import ReactNative from 'react-native';

const {
    Component,
} = React;

const {
    TouchableHighlight,
    Alert,
    Dimensions,
    StyleSheet,
    View,
    Text,
    Image,
	Platform,
	TextInput,
} = ReactNative;

export default class SearchBar extends Component{
	constructor(props) {
        super (props);
        this._onSubmitEditing = this._onSubmitEditing.bind(this);
        this._onChangeText = this._onChangeText.bind(this);
    }

    _onSubmitEditing(event){
		let value = event.nativeEvent.text;
		this.props.onSearch && this.props.onSearch(value);
    }

    _onChangeText(text){
		this.props.searchChangeText && this.props.searchChangeText(text);
    }

    render(){
		let {placeholder} = this.props;
        return (
			<View style={styles.container}>
				<TextInput style={styles.inputText}
					placeholder={placeholder?placeholder:'搜索'}
					onSubmitEditing={this._onSubmitEditing}
					onChangeText={this._onChangeText}
				/>
				<Image source={require('../../images/tabbar/home.png')} style={styles.searchIcon}/>
			</View>
        )
    }
}
const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        height: 40,
        backgroundColor: 'white',
        alignItems: 'center'
    },
    inputText:{
      flex:1,
      backgroundColor:'transparent',
      fontSize:15,
	  marginLeft: 10,
    },
    searchIcon: {
        marginLeft: 5,
        marginRight: 20,
        width: 15,
        height: 20,
        resizeMode: 'stretch'
    },
});