import { __awaiter, __decorate, __extends, __generator } from "tslib";
import Component from 'vue-class-component';
import { Emit, Prop, Watch } from 'vue-property-decorator';
import { Enums } from '../../utils/enums/enums';
import { REGEX_CSS_NUMBER_VALUE } from '../../utils/props-validation/props-validation';
import { ModulVue } from '../../utils/vue/vue';
import { NAVBAR_ITEM_NAME, NAVBAR_NAME } from '../component-names';
import { MIconButton } from '../icon-button/icon-button';
import { MAutoHorizontalScroll, MAutoHorizontalScrollGradientStyle } from './../auto-horizontal-scroll/auto-horizontal-scroll';
import { MNavbarItem } from './navbar-item/navbar-item';
import './navbar-unscoped.scss';
import WithRender from './navbar.html?style=./navbar.scss';
var BaseNavbar = /** @class */ (function (_super) {
    __extends(BaseNavbar, _super);
    function BaseNavbar() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    return BaseNavbar;
}(ModulVue));
export { BaseNavbar };
export var MNavbarSkin;
(function (MNavbarSkin) {
    MNavbarSkin["Any"] = "any";
    MNavbarSkin["NavMain"] = "nav-main";
    MNavbarSkin["NavSub"] = "nav-sub";
    MNavbarSkin["NavSoft"] = "nav-soft";
    MNavbarSkin["TabLight"] = "tab-light";
    MNavbarSkin["TabLightMain"] = "tab-light-main";
    MNavbarSkin["TabDark"] = "tab-dark";
    MNavbarSkin["TabDarkMain"] = "tab-dark-main";
    MNavbarSkin["TabArrow"] = "tab-arrow";
    MNavbarSkin["TabUnderline"] = "tab-underline";
    MNavbarSkin["TabSoft"] = "tab-soft";
    MNavbarSkin["Plain"] = "plain";
})(MNavbarSkin || (MNavbarSkin = {}));
export var MNavbarMaxWidth;
(function (MNavbarMaxWidth) {
    MNavbarMaxWidth["XLarge"] = "1400px";
    MNavbarMaxWidth["Large"] = "1200px";
    MNavbarMaxWidth["Regular"] = "1000px";
    MNavbarMaxWidth["Small"] = "800px";
    MNavbarMaxWidth["Text"] = "720px";
})(MNavbarMaxWidth || (MNavbarMaxWidth = {}));
var MNavbar = /** @class */ (function (_super) {
    __extends(MNavbar, _super);
    function MNavbar() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.animReady = false;
        _this.minWidth = '100px';
        _this.componentWidth = '';
        _this.horizontalScrollOffset = 0;
        _this.internalValue = '';
        _this.navbarItemsInterne = [];
        return _this;
    }
    MNavbar.prototype.emitUpdateSelected = function (value) { };
    MNavbar.prototype.emitClick = function (event, value) { };
    MNavbar.prototype.emitMouseover = function (event, value) { };
    MNavbar.prototype.emitMouseleave = function (event, value) { };
    MNavbar.prototype.setAndUpdate = function (value) {
        var _this = this;
        this.internalValue = value;
        this.$nextTick(function () {
            _this.scrollToSelected();
        });
    };
    MNavbar.prototype.created = function () {
        if (this.skin === MNavbarSkin.TabLight) {
            this.$log.warn('MNavbarSkin.TabLight is deprecated, please use MNavbarSkin.TabLightMain instead.');
        }
        else if (this.skin === MNavbarSkin.TabDark) {
            this.$log.warn('MNavbarSkin.TabDark is deprecated, please use MNavbarSkin.TabDarkMain instead.');
        }
        this.internalValue = undefined;
    };
    MNavbar.prototype.mounted = function () {
        var _this = this;
        this.observer = new MutationObserver(function (mutations) {
            _this.setNavbarItems();
            if (mutations.some(function (mutation) { return mutation.type === 'childList'; })) {
                _this.resizeComponant();
            }
            _this.setSelectedIndicatorPosition();
        });
        this.observer.observe(this.$refs.list, { subtree: true, childList: true, characterData: true });
        this.setNavbarItems();
    };
    MNavbar.prototype.beforeDestroy = function () {
        if (this.observer) {
            this.observer.disconnect();
        }
    };
    Object.defineProperty(MNavbar.prototype, "model", {
        get: function () {
            return this.selected === undefined ? this.internalValue : this.selected;
        },
        set: function (value) {
            this.setAndUpdate(value);
            this.emitUpdateSelected(value);
        },
        enumerable: false,
        configurable: true
    });
    MNavbar.prototype.updateValue = function (value) {
        this.model = value;
    };
    MNavbar.prototype.onMouseover = function (event, value) {
        this.emitMouseover(event, value);
    };
    MNavbar.prototype.onMouseleave = function (event, value) {
        this.emitMouseleave(event, value);
    };
    MNavbar.prototype.onClick = function (event, value) {
        this.emitClick(event, value);
    };
    Object.defineProperty(MNavbar.prototype, "gradientStyle", {
        get: function () {
            if (this.buttonGradientStyle) {
                return this.buttonGradientStyle;
            }
            else {
                switch (this.skin) {
                    case MNavbarSkin.NavMain:
                    case MNavbarSkin.TabDark:
                    case MNavbarSkin.TabDarkMain:
                        return MAutoHorizontalScrollGradientStyle.Dark;
                    case MNavbarSkin.NavSub:
                        return MAutoHorizontalScrollGradientStyle.GreyBlack;
                    case MNavbarSkin.NavSoft:
                        return MAutoHorizontalScrollGradientStyle.Interactive;
                    case MNavbarSkin.TabLightMain:
                        return MAutoHorizontalScrollGradientStyle.Light;
                    case MNavbarSkin.TabArrow:
                    default:
                        return MAutoHorizontalScrollGradientStyle.White;
                }
            }
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MNavbar.prototype, "hasGradient", {
        get: function () {
            return !((this.isTabLightSkin || this.isTabDarkSkin) && this.navigationArrow);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MNavbar.prototype, "isTabLightSkin", {
        get: function () {
            return this.skin === MNavbarSkin.TabLight || this.skin === MNavbarSkin.TabLightMain;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MNavbar.prototype, "isTabDarkSkin", {
        get: function () {
            return this.skin === MNavbarSkin.TabDarkMain || this.skin === MNavbarSkin.TabDark;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MNavbar.prototype, "isTabUnderlineSkin", {
        get: function () {
            return this.skin === MNavbarSkin.TabUnderline;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MNavbar.prototype, "isTabArrowSkin", {
        get: function () {
            return this.skin === MNavbarSkin.TabArrow;
        },
        enumerable: false,
        configurable: true
    });
    MNavbar.prototype.onPreviousButtonClick = function () {
        return __awaiter(this, void 0, void 0, function () {
            var outbound;
            var _this = this;
            return __generator(this, function (_a) {
                if (this.navbarItemsInterne.length < 1) {
                    return [2 /*return*/];
                }
                // find the previus element outside visible area
                this.navbarItemsInterne.forEach(function (item) {
                    if (item.$el.offsetLeft < _this.horizontalScrollOffset) {
                        outbound = item;
                    }
                });
                if (outbound) {
                    this.horizontalScrollOffset = outbound.$el.offsetLeft;
                }
                return [2 /*return*/];
            });
        });
    };
    MNavbar.prototype.onNextButtonClick = function () {
        return __awaiter(this, void 0, void 0, function () {
            var cRight, outbound, threshold;
            return __generator(this, function (_a) {
                if (this.navbarItemsInterne.length < 1) {
                    return [2 /*return*/];
                }
                cRight = this.horizontalScrollOffset + parseInt(this.componentWidth, 10);
                outbound = this.navbarItemsInterne.find(function (item) {
                    return item.$el.offsetLeft + item.$el.clientWidth > cRight;
                });
                if (outbound) {
                    threshold = cRight - outbound.$el.offsetLeft;
                    // move the container scroll
                    this.horizontalScrollOffset += (outbound.$el.clientWidth) - threshold;
                }
                return [2 /*return*/];
            });
        });
    };
    Object.defineProperty(MNavbar.prototype, "selectedNavbarItem", {
        get: function () {
            var _this = this;
            return this.navbarItemsInterne.length > 0 ?
                this.navbarItemsInterne.find(function (i) { return i && i.$props.value === _this.model; }) :
                undefined;
        },
        enumerable: false,
        configurable: true
    });
    MNavbar.prototype.resizeComponant = function (properties) {
        this.minWidth = this.$refs.list.clientWidth + "px";
        if (properties) {
            this.componentWidth = properties.componentWidth;
        }
    };
    MNavbar.prototype.setSelectedIndicatorPosition = function () {
        var navbarItemElement = this.selectedNavbarItem && this.selectedNavbarItem.$el ?
            this.selectedNavbarItem.$el :
            undefined;
        var localRef = this.skin && this.$refs[this.skin] ?
            this.$refs[this.skin] :
            undefined;
        if (!(this.isTabUnderlineSkin || this.isTabArrowSkin) ||
            !(navbarItemElement && localRef)) {
            return;
        }
        var positionX = navbarItemElement.offsetLeft;
        var width = navbarItemElement.clientWidth;
        localRef.style.transform = 'translate3d(' + positionX + 'px, 0, 0)';
        localRef.style.width = width + 'px';
    };
    MNavbar.prototype.setNavbarItems = function () {
        this.navbarItemsInterne = this.$children &&
            this.$children[0] &&
            this.$children[0].$children ?
            this.$children[0].$children.filter(function (element) { return element instanceof MNavbarItem; })
            : [];
    };
    MNavbar.prototype.scrollToSelected = function () {
        return __awaiter(this, void 0, void 0, function () {
            var navbarItemSelectedEl, componentWidth, scrollPositionAlignLeft;
            return __generator(this, function (_a) {
                if (this.navbarItemsInterne.length < 1) {
                    this.animReady = true;
                    return [2 /*return*/];
                }
                navbarItemSelectedEl = this.selectedNavbarItem && this.selectedNavbarItem.$el ?
                    this.selectedNavbarItem.$el :
                    undefined;
                if (navbarItemSelectedEl) {
                    componentWidth = parseInt(this.componentWidth, 10);
                    scrollPositionAlignLeft = navbarItemSelectedEl.offsetLeft;
                    // Check if selected element is visible in navbar
                    if (componentWidth >
                        (navbarItemSelectedEl.offsetLeft -
                            this.horizontalScrollOffset)) {
                        // Check if the selected element exceeds on the left side
                        if ((navbarItemSelectedEl.offsetLeft -
                            this.horizontalScrollOffset)
                            < 0) {
                            this.horizontalScrollOffset = scrollPositionAlignLeft;
                            // Check if the selected element exceeds on the right side
                        }
                        else if (componentWidth < (navbarItemSelectedEl.offsetLeft -
                            this.horizontalScrollOffset + navbarItemSelectedEl.clientWidth)) {
                            this.horizontalScrollOffset = this.horizontalScrollOffset +
                                navbarItemSelectedEl.clientWidth -
                                (this.horizontalScrollOffset +
                                    componentWidth -
                                    navbarItemSelectedEl.offsetLeft);
                        }
                    }
                    else {
                        this.horizontalScrollOffset = scrollPositionAlignLeft;
                    }
                    this.setSelectedIndicatorPosition();
                }
                this.animReady = true;
                return [2 /*return*/];
            });
        });
    };
    __decorate([
        Prop()
    ], MNavbar.prototype, "selected", void 0);
    __decorate([
        Prop({
            default: MNavbarSkin.NavMain,
            validator: function (value) { return Enums.toValueArray(MNavbarSkin).includes(value); }
        })
    ], MNavbar.prototype, "skin", void 0);
    __decorate([
        Prop()
    ], MNavbar.prototype, "disabled", void 0);
    __decorate([
        Prop({ default: true })
    ], MNavbar.prototype, "navigationArrow", void 0);
    __decorate([
        Prop({
            default: MNavbarMaxWidth.Large,
            validator: function (value) {
                return REGEX_CSS_NUMBER_VALUE.test(value);
            }
        })
    ], MNavbar.prototype, "maxWidth", void 0);
    __decorate([
        Prop({ default: true })
    ], MNavbar.prototype, "multiline", void 0);
    __decorate([
        Prop()
    ], MNavbar.prototype, "titleButtonLeft", void 0);
    __decorate([
        Prop()
    ], MNavbar.prototype, "titleButtonRight", void 0);
    __decorate([
        Prop({
            validator: function (value) {
                return Enums.toValueArray(MAutoHorizontalScrollGradientStyle).includes(value);
            }
        })
    ], MNavbar.prototype, "buttonGradientStyle", void 0);
    __decorate([
        Prop({ default: false })
    ], MNavbar.prototype, "autoSelect", void 0);
    __decorate([
        Emit('update:selected')
    ], MNavbar.prototype, "emitUpdateSelected", null);
    __decorate([
        Emit('click')
    ], MNavbar.prototype, "emitClick", null);
    __decorate([
        Emit('mouseover')
    ], MNavbar.prototype, "emitMouseover", null);
    __decorate([
        Emit('mouseleave')
    ], MNavbar.prototype, "emitMouseleave", null);
    __decorate([
        Watch('selected', { immediate: true })
    ], MNavbar.prototype, "setAndUpdate", null);
    MNavbar = __decorate([
        WithRender,
        Component({
            components: {
                MIconButton: MIconButton,
                MAutoHorizontalScroll: MAutoHorizontalScroll
            }
        })
    ], MNavbar);
    return MNavbar;
}(BaseNavbar));
export { MNavbar };
var NavbarPlugin = {
    install: function (v, options) {
        v.component(NAVBAR_ITEM_NAME, MNavbarItem);
        v.component(NAVBAR_NAME, MNavbar);
    }
};
export default NavbarPlugin;
//# sourceMappingURL=navbar.js.map