"use strict";
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 types_1 = require("@skava/modules/view-container/types");
const deps_1 = require("./deps");
exports.isClickInsideElement = deps_1.isClickInsideElement;
class ClickBoundary extends react_1.default.PureComponent {
    constructor() {
        super(...arguments);
        this.setRef = dom => {
            this.dom = dom;
        };
        this.handleClick = event => {
            // if (event.persist) event.persist()
            // console.log('onClickBoundary', event)
            // get click outside callback
            const { onClickOutside } = this.props;
            // if there is no proper callback - no point of checking
            if (exotic_1.isFunction(onClickOutside) === false) {
                return;
            }
            if (deps_1.isClickOutsideElement(event, this.dom) === true) {
                onClickOutside(event);
            }
        };
    }
    // only happens in browser, `willMount` in server
    componentDidMount() {
        if (IS_BROWSER) {
            document.body.addEventListener('click', this.handleClick);
            document.body.addEventListener('ontouchstart', this.handleClick);
        }
    }
    // only happens browser
    componentWillUnmount() {
        if (IS_BROWSER) {
            // remember to remove all events to avoid memory leaks
            document.body.removeEventListener('click', this.handleClick);
            document.body.removeEventListener('ontouchstart', this.handleClick);
        }
    }
    get className() {
        return classnames_1.default('click-boundary', this.props.className);
    }
    render() {
        // why a diff dom?
        // if (IS_BROWSER === false) {
        //   return React.Children.only(this.props.children)
        // } else {
        const children = exotic_1.isFunction(this.props.children)
            ? this.props.children(this)
            : this.props.children;
        /**
         * @todo - should use a ref to this.props.children to avoid pollouting the dom
         * @todo - should maybe pass in `getParentRef` if it's inside...
         */
        if (exotic_1.isFunction(this.props.parentRef) === true) {
            this.setRef(this.props.parentRef);
            return children;
        }
        else {
            return (react_1.default.createElement("div", { ref: this.setRef, className: this.className }, this.props.children));
        }
    }
}
// static isClickOutsideElement = isClickOutsideElement
ClickBoundary.propTypes = {
    // @todo @name onClickOutside
    onClickOutside: types_1.func,
    className: types_1.string,
    children: types_1.node,
    /**
     * @todo @name @example
     *    maybe aria has a standard one too
     *    [provide]  |  [consume]
     *
     *    parentRef  | childrenRef
     *               | childRef
     *               | innerRef
     *
     *    wrapRef    | boxWrap
     *    giveRef    | getRef
     *    provideRef |
     */
    parentRef: types_1.func,
};
exports.ClickBoundary = ClickBoundary;
exports.default = ClickBoundary;
//# sourceMappingURL=ClickBoundary.js.map