import { __decorate, __extends } from "tslib";
import Component from 'vue-class-component';
import { ElementQueries } from '../../mixins/element-queries/element-queries';
import MediaQueriesPlugin from '../../utils/media-queries/media-queries';
import { STEPPERS_ITEM_NAME, STEPPERS_NAME } from '../component-names';
import { BaseSteppers, MSteppersItem, MSteppersItemState } from './steppers-item/steppers-item';
import WithRender from './steppers.html?style=./steppers.scss';
var MSteppers = /** @class */ (function (_super) {
    __extends(MSteppers, _super);
    function MSteppers() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.isAnimActive = false;
        return _this;
    }
    MSteppers.prototype.setLineWidth = function () {
        var defaultLineEL = this.$refs.defaultLine;
        var selectedLineEL = this.$refs.selectedLine;
        var wrapItem = this.$refs.wrapItem;
        var parentWidth = wrapItem.clientWidth;
        var leftSpacing = 0;
        var rightSpacing = 0;
        var hasFindFirst = false;
        for (var i = 0; i <= this.$children.length - 1; i++) {
            if (i === 0 && this.$children.length >= 1) {
                leftSpacing = this.$children[i].$el.clientWidth / 2;
            }
            if (this.$children.length - 1 === i && this.$children.length > 1) {
                rightSpacing = this.$children[i].$el.clientWidth / 2;
            }
            if (this.$children[i].$props.state === MSteppersItemState.InProgress) {
                this.scrollElement(this.$children[i].$el);
            }
        }
        for (var i = this.$children.length - 1; i >= 0; i--) {
            if (hasFindFirst === false && this.$children[i].$props.state === MSteppersItemState.InProgress || hasFindFirst === false && this.$children[i].$props.state === MSteppersItemState.Visited) {
                var childWidth = this.$children[i].$el.clientWidth;
                var childOffset = this.$children[i].$el.offsetLeft;
                this.lineWidth = ((childOffset - leftSpacing + (childWidth / 2)) / parentWidth) * 100;
                hasFindFirst = true;
            }
        }
        defaultLineEL.style.left = leftSpacing + 'px';
        defaultLineEL.style.right = rightSpacing + 'px';
        selectedLineEL.style.width = this.lineWidth + '%';
        selectedLineEL.style.left = leftSpacing + 'px';
    };
    MSteppers.prototype.setAnim = function (value) {
        var _this = this;
        if (value === true) {
            this.isAnimActive = value;
        }
        else {
            setTimeout(function () {
                _this.isAnimActive = value;
            }, 1000);
        }
    };
    MSteppers.prototype.mounted = function () {
        this.initWidthAndHeightOfSteppers();
    };
    MSteppers.prototype.initWidthAndHeightOfSteppers = function () {
        var _this = this;
        this.setLineWidth();
        this.as().$on('resizeDone', this.setLineWidth);
        var overflowWrapperStyleHeight = this.$refs.overflowWrapper.style.height;
        var elStyleHeight = this.$el.style.height;
        var wrapItem = this.$refs.wrapItem;
        var initHeight = wrapItem.clientHeight;
        var scrollbarSpace = 40;
        if (document.readyState === 'complete' || initHeight > 0) {
            elStyleHeight = initHeight + 'px';
            overflowWrapperStyleHeight = initHeight + scrollbarSpace + 'px';
            this.setMinWidth();
        }
        else {
            var intervalForDomReady_1 = setInterval(function () {
                // The document is ready when the clientHeight is larger than 0
                if (wrapItem.clientHeight > 0) {
                    initHeight = wrapItem.clientHeight;
                    elStyleHeight = initHeight + 'px';
                    overflowWrapperStyleHeight = initHeight + scrollbarSpace + 'px';
                    _this.setMinWidth();
                    _this.setLineWidth();
                    window.clearInterval(intervalForDomReady_1);
                }
            }, 100);
        }
    };
    MSteppers.prototype.setMinWidth = function () {
        var wrapItem = this.$refs.wrapItem;
        wrapItem.style.opacity = '0';
        wrapItem.style.display = 'block';
        var childsWidth = 0;
        this.$children.forEach(function (child, index, arr) {
            childsWidth += child.$el.clientWidth;
        });
        var minWidth;
        var numberOfChild = this.$children.length;
        minWidth = childsWidth + ((numberOfChild - 1) * 24);
        wrapItem.style.minWidth = minWidth + 'px';
        wrapItem.style.display = 'flex';
        wrapItem.style.opacity = '1';
    };
    MSteppers.prototype.centeringElement = function (element) {
        this.$refs.overflowWrapper.scrollLeft = element.offsetLeft - ((this.$el.clientWidth / 2) - (element.clientWidth / 2));
    };
    MSteppers.prototype.scrollElement = function (element) {
        this.$refs.overflowWrapper.scrollLeft = element.offsetLeft;
    };
    MSteppers = __decorate([
        WithRender,
        Component({
            mixins: [ElementQueries]
        })
    ], MSteppers);
    return MSteppers;
}(BaseSteppers));
export { MSteppers };
var SteppersPlugin = {
    install: function (v, options) {
        v.use(MediaQueriesPlugin);
        v.component(STEPPERS_ITEM_NAME, MSteppersItem);
        v.component(STEPPERS_NAME, MSteppers);
    }
};
export default SteppersPlugin;
//# sourceMappingURL=steppers.js.map