"use strict";
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
            t[p[i]] = s[p[i]];
    return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importDefault(require("react"));
const classnames_1 = __importDefault(require("classnames"));
const exotic_1 = require("exotic");
const common_1 = require("state/common");
const _deps_1 = require("./_deps");
class ClickBoundary extends react_1.default.Component {
    constructor() {
        super(...arguments);
        // @todo does not need to be state
        // we don't need to do any updates, should be pure
        this.state = common_1.toCommonState(this.props);
        this.isListening = false;
        this.setRef = dom => {
            this.dom = dom;
            if (exotic_1.isFunction(this.props.innerRef) === true) {
                this.props.innerRef(dom);
            }
        };
        this.handleMouseEnter = event => {
            this.state.focus();
            // console.log(
            //   'handleMouseEnter event:',
            //   'isActive:',
            //   this.state.isActive,
            //   'isFocused:',
            //   this.state.isFocused
            // )
        };
        this.handleMouseLeave = event => {
            this.state.blur();
            this.state.setActive(true);
            // console.debug(
            //   '[ClickBoundary] handleMouseLeave',
            //   'isActive',
            //   this.state.isActive,
            //   'isFocused:',
            //   this.state.isFocused
            // )
            this.subscribeListener();
        };
        this.handleClick = event => {
            // console.debug('[ClickBoundary] handleClick ' + this.props.className)
            _deps_1.onClick(event, this.props, this.dom);
            this.state.setActive(false);
            this.unSubscribeListener();
        };
    }
    /**
     * only happens in browser, `willMount` in server
     */
    subscribeListener() {
        if (this.state.isActive && !this.isListening) {
            // console.debug('[click boundary] subscribing')
            // @note - document.body
            window.addEventListener('click', this.handleClick);
            window.addEventListener('ontouchstart', this.handleClick);
            this.isListening = true;
        }
    }
    /**
     * only happens browser
     */
    unSubscribeListener() {
        if (this.isListening) {
            // console.debug('[click boundary] unsubscribing')
            // remember to remove all events to avoid memory leaks
            window.removeEventListener('click', this.handleClick);
            window.removeEventListener('ontouchstart', this.handleClick);
            this.isListening = false;
        }
    }
    // @todo remove
    get className() {
        return classnames_1.default('click-boundary', this.props.className);
    }
    get attributes() {
        // omit(this.props, ['className', 'children', 'onClickOutside'])
        const _a = this.props, { className, children, onClickOutside } = _a, remainingProps = __rest(_a, ["className", "children", "onClickOutside"]);
        return Object.assign({}, remainingProps, { className: this.className });
    }
    render() {
        const props = Object.assign({}, this.props, { setRef: this.setRef });
        const children = _deps_1.toChildren(props, this.dom);
        if (exotic_1.isFunction(props.parentRef) === true) {
            this.setRef(props.parentRef);
            return children;
        }
        else {
            return (react_1.default.createElement("div", Object.assign({}, this.attributes, { ref: this.setRef, className: this.className, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }), this.props.children));
        }
    }
}
exports.ClickBoundary = ClickBoundary;
exports.default = ClickBoundary;
//# sourceMappingURL=ClickBoundary.js.map