"use strict";
/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Notification = void 0;
/* eslint jsx-a11y/no-static-element-interactions: 0 */
var react_1 = __importDefault(require("react"));
var bem_react_classname_1 = require("bem-react-classname");
var icons_classic_1 = require("@alfalab/icons-classic");
var cn_1 = require("../cn");
var icon_button_1 = __importDefault(require("../icon-button/icon-button"));
var swipeable_1 = __importDefault(require("../swipeable"));
var window_1 = require("../lib/window");
/**
 * Компонент всплывающего окна.
 */
var Notification = /** @class */ (function (_super) {
    __extends(Notification, _super);
    function Notification() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.cn = bem_react_classname_1.createCn('notification');
        _this.state = {
            hovered: false,
        };
        _this.closeTimeout = null;
        _this.clickEventBindTimeout = null;
        _this.isWindowClickBinded = false;
        _this.handleSwipe = function (direction) {
            if (direction === 'left' || direction === 'right' || direction === 'top') {
                _this.handleCloserClick();
            }
        };
        _this.handleCloserClick = function (event) {
            if (_this.props.onCloserClick) {
                _this.props.onCloserClick(event);
            }
        };
        _this.handleKeyDown = function (event) {
            if (_this.props.onKeyDown) {
                _this.props.onKeyDown(event);
            }
        };
        _this.handleMouseEnter = function (event) {
            _this.setState({ hovered: true });
            _this.stopCloseTimer();
            if (_this.props.onMouseEnter) {
                _this.props.onMouseEnter(event);
            }
        };
        _this.handleMouseLeave = function (event) {
            _this.setState({ hovered: false });
            _this.stopCloseTimer();
            _this.startCloseTimer();
            if (_this.props.onMouseLeave) {
                _this.props.onMouseLeave(event);
            }
        };
        _this.handleClick = function (event) {
            if (_this.props.onClick) {
                _this.props.onClick(event);
            }
        };
        _this.handleWindowClick = function (event) {
            if (_this.props.onClickOutside && _this.root
                && window_1.isNodeOutsideElement(event.target, _this.root)) {
                _this.props.onClickOutside(event);
            }
        };
        return _this;
    }
    Notification.prototype.componentDidMount = function () {
        this.startCloseTimer();
        if (this.props.onClickOutside) {
            this.ensureClickEvent();
        }
    };
    Notification.prototype.componentDidUpdate = function (prevProps) {
        if (prevProps.onClickOutside !== this.props.onClickOutside) {
            this.ensureClickEvent();
        }
        else if (prevProps.visible !== this.props.visible) {
            this.ensureClickEvent(!this.props.visible);
        }
    };
    Notification.prototype.componentWillUnmount = function () {
        this.stopCloseTimer();
        if (this.props.onClickOutside) {
            this.ensureClickEvent(true);
        }
    };
    Notification.prototype.render = function () {
        var _this = this;
        var _a = this.props, theme = _a.theme, status = _a.status;
        var ToggledIcon;
        switch (status) {
            case 'error':
                ToggledIcon = icons_classic_1.ErrorMColorIcon;
                break;
            case 'fail':
                ToggledIcon = icons_classic_1.FailMIcon;
                break;
            case 'ok':
                ToggledIcon = icons_classic_1.OkMColorIcon;
                break;
            default:
                ToggledIcon = icons_classic_1.OkMColorIcon;
                break;
        }
        return (react_1.default.createElement(swipeable_1.default, { onSwipe: this.handleSwipe },
            react_1.default.createElement("div", { ref: function (root) {
                    _this.root = root;
                }, className: this.cn({
                    visible: this.props.visible,
                    status: status,
                    hovered: this.state.hovered,
                    'has-closer': this.props.hasCloser,
                    'stick-to': this.props.stickTo,
                }), id: this.props.id, style: this.getPosition(), onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onClick: this.handleClick, onKeyDown: this.handleKeyDown, "data-test-id": this.props['data-test-id'] },
                react_1.default.createElement("div", { className: this.cn('icon', { theme: theme }) }, this.props.icon
                    || (react_1.default.createElement(ToggledIcon, null))),
                this.props.title
                    && (react_1.default.createElement("div", { className: this.cn('title') }, this.props.title)),
                this.props.children
                    && (react_1.default.createElement("div", { className: this.cn('content') }, this.props.children)),
                this.props.hasCloser
                    && (react_1.default.createElement(icon_button_1.default, { className: this.cn('closer', { theme: theme }), size: "m", onClick: this.handleCloserClick },
                        react_1.default.createElement(icons_classic_1.CloseSIcon, null))))));
    };
    Notification.prototype.getPosition = function () {
        return { top: this.props.offset };
    };
    Notification.prototype.startCloseTimer = function () {
        var _this = this;
        this.closeTimeout = setTimeout(function () {
            if (_this.props.onCloseTimeout) {
                _this.props.onCloseTimeout();
            }
        }, this.props.autoCloseDelay);
    };
    Notification.prototype.stopCloseTimer = function () {
        clearTimeout(this.closeTimeout);
        this.closeTimeout = null;
    };
    Notification.prototype.ensureClickEvent = function (isDestroy) {
        var _this = this;
        var isNeedBindEvent = isDestroy === undefined ? this.props.visible : !isDestroy;
        // We need timeouts to not to catch the event that causes
        // popup opening (because it propagates to the `window`).
        if (this.clickEventBindTimeout) {
            clearTimeout(this.clickEventBindTimeout);
            this.clickEventBindTimeout = null;
        }
        this.clickEventBindTimeout = setTimeout(function () {
            if (!_this.isWindowClickBinded && isNeedBindEvent) {
                window.addEventListener('click', _this.handleWindowClick);
                window.addEventListener('touchend', _this.handleWindowClick);
                _this.isWindowClickBinded = true;
            }
            else if (_this.isWindowClickBinded && !isNeedBindEvent) {
                window.removeEventListener('click', _this.handleWindowClick);
                window.removeEventListener('touchend', _this.handleWindowClick);
                _this.isWindowClickBinded = false;
            }
        }, 0);
    };
    Notification.defaultProps = {
        autoCloseDelay: 5000,
        stickTo: 'right',
        offset: 12,
        hasCloser: true,
    };
    return Notification;
}(react_1.default.PureComponent));
exports.Notification = Notification;
exports.default = cn_1.withTheme(Notification);

//# sourceMappingURL=notification.js.map
