<template>
    <div class="order-status">
        <div :class="`current-status theme-${steps[currentStep].color}`">
            <div class="symbol"> <v-icon> WMi-{{ steps[currentStep].icon }} </v-icon> </div>
            <div class="text">
                <name-block :theme="`theme-${(steps[currentStep].color)}`" :name_fa="steps[currentStep].name_fa" :name_en="steps[currentStep].name_en" :number="parseInt(currentStep)+1" />
            </div>
        </div>
        <v-stepper class="we-stepper">
            <v-stepper-header>
                <v-stepper-step v-for="(step, index) in steps" :key="index" :step="index+1" :class="`fade-in fast delay-0${index} theme-${step.color} ${getStepStatus(index,currentStep)}`">
                    <name-block :theme="`sm`" :name_en="step.name_en" :name_fa="step.name_fa" />
                </v-stepper-step>

            </v-stepper-header>
        </v-stepper>
    </div>

</template>
<script>

    export default {
        name: "steps-timeline",
        props: {
            currentStep:    {default: 1},
            steps:          {default: ""},
        },
        methods: {
            getStepStatus: function(thisStep, currentStep) {
                if(thisStep > currentStep) {
                    return 'waiting';
                } else if(thisStep == currentStep) {
                    return 'active';
                } else if(thisStep < currentStep) {
                    return 'passed';
                }
            }
        },
    }
</script>
<style lang="scss" scoped>
    .order-status {
        border: 1px solid #eeeeee;
        border-radius: 5px;
        margin-top: 10px;
    }
    .current-status {
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 30px;
    }
    .current-status .symbol .v-icon {
        font-size: 90px;
    }
    .current-status .text {
        display: flex;
        justify-content: center;
        align-items: center;
    }


</style>
<style lang="scss">
    .we-stepper .v-stepper__step.passed {
        filter: grayscale(100%);
        opacity: 0.5 !important;
    }
    .theme--light.v-stepper .v-stepper__step--active .v-stepper__label {
        text-shadow: none;
    }
    /* --------------------------------------------------------
                        Steps : Colors
    -------------------------------------------------------- */
    @import "resources/js/Global/scss/_vars.scss";
    @each $color,
    $value in $colors {
        //-------------------Active State-----------------------------
        .v-stepper.we-stepper .v-stepper__step.theme-#{$color}.active .v-stepper__label .title-fa,
        .v-stepper.we-stepper .v-stepper__step.theme-#{$color}.active .v-stepper__label .title-en,
        .v-stepper.we-stepper .v-stepper__step.theme-#{$color}.active .v-stepper__step__step {
            color: #fff;
        }
        .v-stepper.we-stepper .v-stepper__step.theme-#{$color}.active {
            background-color: $value;
        }

        //-------------------Waiting State-----------------------------
        .v-stepper.we-stepper .v-stepper__step.theme-#{$color}.waiting .v-stepper__label .title-fa,
        .v-stepper.we-stepper .v-stepper__step.theme-#{$color}.waiting .v-stepper__label .title-en {
            color: $value;
        }
        .v-stepper.we-stepper .v-stepper__step.theme-#{$color}.waiting .v-stepper__step__step {
            color: $value
        }

        //-------------------Current Step-----------------------------
        .order-status .current-status.theme-#{$color} {
            border: 2px solid $value;
        }
        .order-status .current-status.theme-#{$color} .symbol .v-icon {
            color: $value
        }
    }
</style>
