<template>
    <div class="d-flex justify-content-center p-2">
        <div class="d-inline-block"
             tabindex="0"
             data-bs-toggle="tooltip"
             data-bs-placement="top"
             title="Step 1. - Login">
            <a id="tab-login" :href="GetLink(1)" :class="GetClassStyle(1)"></a>
        </div>

        <div class="d-inline-block"
             tabindex="0"
             data-bs-toggle="tooltip"
             data-bs-placement="top"
             :title="$translate('Step 2. - Return Selection')">
            <a id="tab-returns" :href="GetLink(2)" :class="GetClassStyle(2)"></a>
        </div>
        <div class="d-inline-block"
             tabindex="0"
             data-bs-toggle="tooltip"
             data-bs-placement="top"
             :title="$translate('Step 3. - Return Confirmation')">
            <a id="tab-submit" :href="GetLink(3)" :class="GetClassStyle(3)"></a>
        </div>
        <div class="d-inline-block"
             tabindex="0"
             data-bs-toggle="tooltip"
             data-bs-placement="top"
             :title="$translate('Step 4. - Return Label')">
            <a id="tab-info" :href="GetLink(4)" :class="GetClassStyle(4)"></a>
        </div>
    </div>
</template>

<script>
module.exports = {
    props: ["loading", "active", "returns"],
    data: function () {
        return {
             logPrefix: "[Vue][Component][TabHeader] "
        };
    },
    mounted: function () {

        console.log(this.logPrefix + "component is mounting");

        this.$nextTick(() => {

            //--- enable tool-tips ---
            var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
            var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
                return new bootstrap.Tooltip(tooltipTriggerEl)
            });
        });

    },
    watch: {

    },
    methods: {

        GetClassStyle: function(step) {

            var style = "btn ";

            if (!(this.active == step || this.active == 'none')) {
                style += "btn-secondary ";
            } else {
                style += "btn-primary ";
            }
            

            if (step > this.active && !this.returns) {
                style += "disabled ";
            }

            style += "tab-bar-item";

            return style;
        },

        GetLink: function (step) {

            var urlParams = new URLSearchParams(window.location.search);
            var reference = urlParams.get('reference');
            var language = urlParams.get('lang');
            if (language == null || language == undefined) { language == this.language; }
            if (language == null || language == undefined) { language == "de"; }


            switch (step) {
                case 2: return "/ReturnOrders?reference=" + reference + "&lang=" + language;
                case 3: return "/ReturnOverview?reference=" + reference + "&lang=" + language;
                case 4: return "/ReturnLabel?reference=" + reference + "&lang=" + language;
                default: {
                    if (reference != null) {
                        return "/Login?reference=" + reference + "&lang=" + language;
                    } else {
                        return "/Login";
                    }
                }
            }
           
        }
    }
}
</script>
