import { __decorate, __extends, __metadata } from "tslib";
import { Component, Prop, Watch } from 'vue-property-decorator';
import { PanelType } from './Panel.types';
import BaseComponent from '../BaseComponent';
import { Layer } from '../Layer';
import { Overlay } from '../Overlay';
import { IconButton } from '../Button';
import { classNamesFunction, getId, elementContains, getRTL } from '@uifabric-vue/utilities';
import { IconFontSizes } from '@uifabric/styling';
var getClassNames = classNamesFunction();
var PanelVisibilityState;
(function (PanelVisibilityState) {
    PanelVisibilityState[PanelVisibilityState["closed"] = 0] = "closed";
    PanelVisibilityState[PanelVisibilityState["animatingOpen"] = 1] = "animatingOpen";
    PanelVisibilityState[PanelVisibilityState["open"] = 2] = "open";
    PanelVisibilityState[PanelVisibilityState["animatingClosed"] = 3] = "animatingClosed";
})(PanelVisibilityState || (PanelVisibilityState = {}));
var PanelBase = /** @class */ (function (_super) {
    __extends(PanelBase, _super);
    function PanelBase() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.IconFontSizes = IconFontSizes;
        _this.isFooterSticky = false;
        _this.id = getId('Panel');
        _this.visibility = PanelVisibilityState.closed;
        _this.animationCallback = null;
        return _this;
    }
    PanelBase.prototype.created = function () {
        window.addEventListener('resize', this.updateFooterPosition);
        if (this.shouldListenForOuterClick) {
            window.addEventListener('mousedown', this.dismissOnOuterClick, true);
        }
    };
    PanelBase.prototype.onIsOpenUpdated = function (newVal, prevVal) {
        console.log('onIsOpenUpdated');
        if (newVal) {
            this.visibility = PanelVisibilityState.animatingOpen;
        }
    };
    PanelBase.prototype.onVisibilityUpdated = function (newVal, prevVal) {
        console.log(newVal, prevVal);
        if (newVal !== prevVal) {
            this.clearExistingAnimationTimer();
            if (newVal === PanelVisibilityState.animatingOpen) {
                this.animateTo(PanelVisibilityState.open);
            }
            else if (newVal === PanelVisibilityState.animatingClosed) {
                this.animateTo(PanelVisibilityState.closed);
            }
        }
    };
    Object.defineProperty(PanelBase.prototype, "shouldListenForOuterClick", {
        get: function () {
            return !!this.isBlocking && !!this.isOpen;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(PanelBase.prototype, "classNames", {
        get: function () {
            var _a = this, styles = _a.styles, theme = _a.theme, _b = _a.className, className = _b === void 0 ? '' : _b, focusTrapZoneProps = _a.focusTrapZoneProps, hasCloseButton = _a.hasCloseButton, _c = _a.headerClassName, headerClassName = _c === void 0 ? '' : _c, isFooterSticky = _a.isFooterSticky, isFooterAtBottom = _a.isFooterAtBottom, isHiddenOnDismiss = _a.isHiddenOnDismiss, type = _a.type;
            var visibility = this.visibility;
            var isOpen = this.isActive;
            var isAnimating = visibility === PanelVisibilityState.animatingClosed || visibility === PanelVisibilityState.animatingOpen;
            var isLeft = !!(type === PanelType.smallFixedNear || type === PanelType.customNear);
            var isRTL = getRTL(theme);
            var isOnRightSide = isRTL ? isLeft : !isLeft;
            return getClassNames(styles, {
                theme: theme,
                className: className,
                focusTrapZoneClassName: focusTrapZoneProps ? focusTrapZoneProps.className : undefined,
                hasCloseButton: hasCloseButton,
                headerClassName: headerClassName,
                isAnimating: isAnimating,
                isFooterSticky: isFooterSticky,
                isFooterAtBottom: isFooterAtBottom,
                isOnRightSide: isOnRightSide,
                isOpen: isOpen,
                isHiddenOnDismiss: isHiddenOnDismiss,
                type: type,
                hasCustomNavigation: false,
            });
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(PanelBase.prototype, "isAnimating", {
        get: function () {
            var visibility = this.visibility;
            return visibility === PanelVisibilityState.animatingClosed || visibility === PanelVisibilityState.animatingOpen;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(PanelBase.prototype, "isActive", {
        get: function () {
            return this.visibility === PanelVisibilityState.open || this.visibility === PanelVisibilityState.animatingOpen;
        },
        enumerable: false,
        configurable: true
    });
    PanelBase.prototype.close = function () {
        console.log('close');
        console.log(this.isOpen, this.isActive, this.visibility);
        if (this.isOpen !== undefined)
            return;
        if (!this.isActive)
            return;
        console.log(this.visibility);
        this.visibility = PanelVisibilityState.animatingClosed;
    };
    PanelBase.prototype.dismiss = function (ev) {
        console.log('dismiss');
        if (this.onDismiss) {
            this.onDismiss(ev);
        }
        if (!ev || (ev && !ev.defaultPrevented)) {
            this.close();
        }
    };
    PanelBase.prototype.dismissOnOuterClick = function (ev) {
        var panel = this.$refs.panel;
        if (this.isActive && panel && !ev.defaultPrevented()) {
            if (!elementContains(panel, ev.target)) {
                if (this.onOuterClick) {
                    this.onOuterClick();
                    ev.preventDefault();
                }
                else {
                    this.dismiss();
                }
            }
        }
    };
    PanelBase.prototype.updateFooterPosition = function () {
        var scrollableContent = this.$refs.scrollableContent;
        if (scrollableContent) {
            var height = scrollableContent.clientHeight;
            var innerHeight_1 = scrollableContent.scrollHeight;
            this.isFooterSticky = height < innerHeight_1;
        }
    };
    PanelBase.prototype.animateTo = function (newVisibilityState) {
        var _this = this;
        console.log('animateTo', newVisibilityState);
        this.animationCallback = this._async.setTimeout(function () {
            _this.visibility = newVisibilityState;
            _this._onTransitionComplete();
        }, 200);
    };
    PanelBase.prototype.clearExistingAnimationTimer = function () {
        if (this.animationCallback !== null) {
            this._async.clearTimeout(this.animationCallback);
        }
    };
    PanelBase.prototype._onTransitionComplete = function () {
        this.updateFooterPosition();
        if (this.visibility === PanelVisibilityState.open && this.onOpened) {
            this.onOpened();
        }
        if (this.visibility === PanelVisibilityState.closed && this.onDismissed) {
            this.onDismissed();
        }
    };
    PanelBase.prototype.render = function (h) {
        var _a = this, classNames = _a.classNames, isOpen = _a.isOpen, isAnimating = _a.isAnimating, isHiddenOnDismiss = _a.isHiddenOnDismiss, isBlocking = _a.isBlocking, theme = _a.theme, headerText = _a.headerText;
        if (!isOpen && !isAnimating && !isHiddenOnDismiss)
            return;
        var $commands = h('div', {
            class: classNames.commands,
        }, [
            h('div', {
                class: classNames.navigation,
            }, [
                h(IconButton, {
                    class: classNames.closeButton,
                    attrs: {
                        styles: {
                            root: {
                                height: 'auto',
                                width: '44px',
                                color: theme.palette.neutralSecondary,
                                fontSize: IconFontSizes.large,
                            },
                            rootHovered: {
                                color: theme.palette.neutralPrimary,
                            },
                        },
                        iconProps: { iconName: 'Cancel' },
                    },
                    nativeOn: {
                        click: this.dismiss,
                    },
                }),
            ]),
        ]);
        var $contentInner = h('div', { class: classNames.contentInner }, [
            h('div', { class: classNames.header }, [
                h('p', { class: classNames.headerText }, this.$slots.header || headerText),
            ]),
            h('div', {
                ref: 'scrollableContent',
                class: classNames.scrollableContent,
            }, [
                h('div', { class: classNames.content }, this.$slots.default),
            ]),
        ]);
        return h(Layer, [
            h('div', {
                ref: 'panel',
                class: classNames.root,
            }, [
                (isBlocking && isOpen) && h(Overlay, { class: classNames.overlay }),
                h('div', { class: classNames.main }, [
                    $commands,
                    $contentInner,
                ]),
            ]),
        ]);
    };
    __decorate([
        Prop({ type: String, default: null }),
        __metadata("design:type", String)
    ], PanelBase.prototype, "headerText", void 0);
    __decorate([
        Prop(),
        __metadata("design:type", Object)
    ], PanelBase.prototype, "focusTrapZoneProps", void 0);
    __decorate([
        Prop(),
        __metadata("design:type", Object)
    ], PanelBase.prototype, "headerClassName", void 0);
    __decorate([
        Prop({ type: Number, default: PanelType.smallFixedFar }),
        __metadata("design:type", Number)
    ], PanelBase.prototype, "type", void 0);
    __decorate([
        Prop({ type: Function, default: null }),
        __metadata("design:type", Function)
    ], PanelBase.prototype, "onDismiss", void 0);
    __decorate([
        Prop({ type: Function, default: null }),
        __metadata("design:type", Function)
    ], PanelBase.prototype, "onDismissed", void 0);
    __decorate([
        Prop({ type: Function, default: null }),
        __metadata("design:type", Function)
    ], PanelBase.prototype, "onOpened", void 0);
    __decorate([
        Prop({ type: Function, default: null }),
        __metadata("design:type", Function)
    ], PanelBase.prototype, "onOuterClick", void 0);
    __decorate([
        Prop({ type: Boolean, default: true }),
        __metadata("design:type", Boolean)
    ], PanelBase.prototype, "hasCloseButton", void 0);
    __decorate([
        Prop({ type: Boolean, default: false }),
        __metadata("design:type", Boolean)
    ], PanelBase.prototype, "isFooterAtBottom", void 0);
    __decorate([
        Prop({ type: Boolean, default: null }),
        __metadata("design:type", Boolean)
    ], PanelBase.prototype, "isOpen", void 0);
    __decorate([
        Prop({ type: Boolean, default: false }),
        __metadata("design:type", Boolean)
    ], PanelBase.prototype, "isHiddenOnDismiss", void 0);
    __decorate([
        Prop({ type: Boolean, default: true }),
        __metadata("design:type", Boolean)
    ], PanelBase.prototype, "isBlocking", void 0);
    __decorate([
        Watch('isOpen'),
        __metadata("design:type", Function),
        __metadata("design:paramtypes", [Boolean, Boolean]),
        __metadata("design:returntype", void 0)
    ], PanelBase.prototype, "onIsOpenUpdated", null);
    __decorate([
        Watch('visibility'),
        __metadata("design:type", Function),
        __metadata("design:paramtypes", [Number, Number]),
        __metadata("design:returntype", void 0)
    ], PanelBase.prototype, "onVisibilityUpdated", null);
    PanelBase = __decorate([
        Component
    ], PanelBase);
    return PanelBase;
}(BaseComponent));
export { PanelBase };
//# sourceMappingURL=Panel.base.js.map