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

const {
    PropTypes,
    Component,
} = React;

const {
    NativeModules,
} = ReactNative;

const YH_SearchBarView = ReactNative.requireNativeComponent('YH_SearchBarView', null);

export default class YH_SearchBar extends Component {
    static propTypes = {
        placeholder: PropTypes.string,
        text: PropTypes.string,
        editable: PropTypes.bool,
        onBeginEditing: PropTypes.func,
        onEndEditing: PropTypes.func,
        onTextChange: PropTypes.func,
        onClickCancel: PropTypes.func,
        // onFocus: PropTypes.func,
        // onBlur: PropTypes.func,
    };

    static defaultProps = {
        editable: true,
    };

    constructor(props) {
        super (props);

        this._onBeginEditing = this._onBeginEditing.bind(this);
        this._onEndEditing = this._onEndEditing.bind(this);
        this._onTextChange = this._onTextChange.bind(this);
        this._onClickCancel = this._onClickCancel.bind(this);
    }

    _onBeginEditing(e) {
        let text = e.nativeEvent.text ? e.nativeEvent.text : '';
        this.props.onBeginEditing && this.props.onBeginEditing(text);
    }

    _onEndEditing(e) {
        let text = e.nativeEvent.text ? e.nativeEvent.text : '';
        this.props.onEndEditing && this.props.onEndEditing(text);
    }

    _onTextChange(e) {
        let text = e.nativeEvent.text ? e.nativeEvent.text : '';
        this.props.onTextChange && this.props.onTextChange(text);
    }

    _onClickCancel(e) {
        let text = e.nativeEvent.text ? e.nativeEvent.text : '';
        this.props.onClickCancel && this.props.onClickCancel(text);
    }

    blur() {
        return NativeModules.YH_SearchBarViewManager.blur(ReactNative.findNodeHandle(this));
    }

    focus() {
        return NativeModules.YH_SearchBarViewManager.focus(ReactNative.findNodeHandle(this));
    }

    unFocus() {
        return NativeModules.YH_SearchBarViewManager.unFocus(ReactNative.findNodeHandle(this));
    }

    render() {
        
        return (
            <YH_SearchBarView
                {...this.props}
                style={[{height: 44, backgroundColor: 'white',}]}
                onBeginEditing={this._onBeginEditing}
                onEndEditing={this._onEndEditing}
                onTextChange={this._onTextChange}
                onClickCancel={this._onClickCancel}
                
            />
        );
    }
}