import _extends from 'babel-runtime/helpers/extends';
import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
import _createClass from 'babel-runtime/helpers/createClass';
import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
import _inherits from 'babel-runtime/helpers/inherits';
/**
 * trigger.jsx
 *
 * @Author: jruif
 * @Date: 2018/1/5 上午11:01
 */

import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';

/**
 * @ignore
 */

var Trigger = function (_React$Component) {
    _inherits(Trigger, _React$Component);

    function Trigger(props, context) {
        _classCallCheck(this, Trigger);

        var _this = _possibleConstructorReturn(this, (Trigger.__proto__ || Object.getPrototypeOf(Trigger)).call(this, context));

        _this.handleTriggerFocus = function (e) {
            var _this$props = _this.props,
                trigger = _this$props.trigger,
                isOpenOnTriggerFocus = _this$props.isOpenOnTriggerFocus;

            // 调用原生事件

            trigger.props.onFocus && trigger.props.onFocus(e);

            if (!isOpenOnTriggerFocus) return;

            // react销毁了事件对象的所有属性
            // 所以有些事件的属性(e.g currentTarget)请求到却是null，所有这里我们直接clone
            _this.onOpen(_extends({}, e));
        };

        _this.handleTriggerBlur = function (e) {
            var _this$props2 = _this.props,
                children = _this$props2.children,
                isCloseOnTriggerBlur = _this$props2.isCloseOnTriggerBlur;

            // 调用原生事件

            children.props.onBlur && children.props.onBlur(e);

            // 焦点是否在box中
            var didFocusBox = _this.rootNode && _this.rootNode.contains(e.relatedTarget);

            if (!isCloseOnTriggerBlur || didFocusBox) return;

            _this.onClose(e);
        };

        _this.handleTriggerClick = function (e) {
            var _this$props3 = _this.props,
                children = _this$props3.children,
                isCloseOnTriggerClick = _this$props3.isCloseOnTriggerClick,
                isOpenOnTriggerClick = _this$props3.isOpenOnTriggerClick,
                isOpen = _this$props3.isOpen;
            // const { isOpen } = this.state;

            e.stopPropagation();
            // 调用原生事件
            children.props.onClick && children.props.onClick(e);

            if (isOpen && isCloseOnTriggerClick) {
                _this.onClose(e);
            } else if (!isOpen && isOpenOnTriggerClick) {
                _this.onOpen(_extends({}, e));
            }
        };

        _this.handleTriggerMouseLeave = function (e) {
            clearTimeout(_this.mouseEnterTimer);

            var _this$props4 = _this.props,
                children = _this$props4.children,
                isCloseOnTriggerMouseLeave = _this$props4.isCloseOnTriggerMouseLeave,
                mouseLeaveDelay = _this$props4.mouseLeaveDelay;


            children.props.onMouseLeave && children.props.onMouseLeave(e);

            if (!isCloseOnTriggerMouseLeave) return;

            _this.mouseLeaveTimer = _this.closeWithTimeout(e, mouseLeaveDelay);
        };

        _this.handleTriggerMouseEnter = function (e) {
            clearTimeout(_this.mouseLeaveTimer);

            var _this$props5 = _this.props,
                children = _this$props5.children,
                mouseEnterDelay = _this$props5.mouseEnterDelay,
                isOpenOnTriggerMouseEnter = _this$props5.isOpenOnTriggerMouseEnter;

            // Call original event handler

            children.props.onMouseEnter && children.props.onMouseEnter(_this.handleTriggerMouseEnter);

            if (!isOpenOnTriggerMouseEnter) return;

            _this.mouseEnterTimer = _this.openWithTimeout(e, mouseEnterDelay);
        };

        return _this;
    }

    _createClass(Trigger, [{
        key: 'render',
        value: function render() {
            var children = this.props.children;

            return React.cloneElement(children, {
                key: 'box-trigger',
                ref: this.handleTriggerRef,
                onBlur: this.handleTriggerBlur,
                onClick: this.handleTriggerClick,
                onFocus: this.handleTriggerFocus,
                onMouseLeave: this.handleTriggerMouseLeave,
                onMouseEnter: this.handleTriggerMouseEnter,
                className: classNames('box-trigger', children.props.className)
            });
        }
    }]);

    return Trigger;
}(React.Component);

Trigger.propTypes = {
    /** 主要内容 */
    children: PropTypes.node.isRequired,

    /** 额外样式 */
    className: PropTypes.string,

    isOpen: PropTypes.bool,

    /** 在trigger上失焦是否关闭 */
    isCloseOnTriggerBlur: PropTypes.bool,

    /** 在trigger上点击是否关闭 */
    isCloseOnTriggerClick: PropTypes.bool,

    /** 在trigger上Mouse Leave是否关闭 */
    isCloseOnTriggerMouseLeave: PropTypes.bool,

    /** 当trigger被点击时，是否打开 */
    isOpenOnTriggerClick: PropTypes.bool,

    /** 当trigger被focus时，是否打开 */
    isOpenOnTriggerFocus: PropTypes.bool,

    /** 当trigger被Mouse Enter时，是否打开 */
    isOpenOnTriggerMouseEnter: PropTypes.bool,

    /**
     * 关闭的时候回调
     *
     * @param {SyntheticEvent} event - React's original SyntheticEvent.
     * @param {object} data - 所有 props.
     */
    onClose: PropTypes.func,

    /**
     * 当显示当时候回调
     *
     * @param {SyntheticEvent} event - React's original SyntheticEvent.
     * @param {object} data - 所有 props.
     */
    onOpen: PropTypes.func,

    triggerRef: PropTypes.func
};
Trigger.defaultProps = {
    isCloseOnTriggerBlur: true,
    isCloseOnTriggerClick: true,
    isCloseOnTriggerMouseLeave: false,
    isOpenOnTriggerClick: false,
    isOpenOnTriggerFocus: false,
    isOpenOnTriggerMouseEnter: false
};


export default Trigger;