import React from 'react';
import ReactNative from 'react-native';
import {Platform} from 'react-native';

const {
    PropTypes,
    Component,
} = React;

const {
    NativeModules,
} = ReactNative;

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

var UIManager = require('UIManager');

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() {
        if (Platform.OS === 'ios') {
            return NativeModules.YH_SearchBarViewManager.blur(ReactNative.findNodeHandle(this));
        }
        else{
            return UIManager.dispatchViewManagerCommand(
                ReactNative.findNodeHandle(this),
                UIManager.YH_SearchBarView.Commands.blur, null
            );
        }
    }


    focus() {
        if (Platform.OS === 'ios') {
            return NativeModules.YH_SearchBarViewManager.focus(ReactNative.findNodeHandle(this));
        }
        else{
            return UIManager.dispatchViewManagerCommand(
                ReactNative.findNodeHandle(this),
                UIManager.YH_SearchBarView.Commands.focus, null
            );
        }
    }

    unFocus() {
        if (Platform.OS === 'ios') {
            return NativeModules.YH_SearchBarViewManager.unFocus(ReactNative.findNodeHandle(this));
        }
        else{
            return UIManager.dispatchViewManagerCommand(
                ReactNative.findNodeHandle(this),
                UIManager.YH_SearchBarView.Commands.unFocus, null
            );
        }
    }

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