<template>
    <div
        class="container flex flex-col justify-center w-full md:items-center gap-y-1 md:flex-row flex-nowrap"
    >
        <div
            v-for="(step, index) in steps"
            :key="step"
            :class="
                index + 1 < steps.length
                    ? 'after:flex-1 after:-translate-y-3 md:after:contents-[] md:after:border-b-[2px] md:after:border-gray-200 md:after:h-1 flex-1'
                    : 'md:w-full md:max-w-[225px]'
            "
            class="flex flex-col justify-between select-none md:flex-row md:items-center flex-nowrap"
        >
            <button
                :class="[
                    canNavigate(index)
                        ? 'bg-blue-100 text-gray-200'
                        : currentStep === index
                        ? 'bg-blue-100 text-blue-300 cursor-default'
                        : 'bg-blue-100 text-gray-200 cursor-not-allowed',
                ]"
                class="flex flex-row md:flex-col max-w-[175px] md:max-w-[225px] items-center md:justify-center w-full md:py-2 border-4 border-blue-100 rounded-full gap-2 no-brightness transition duration-200 transform-gpu ease-in-out"
                type="button"
                @click="navigateSteps(index)"
            >
                <transition
                    enter-active-class="transition duration-200 transform-gpu ease-overstep"
                    enter-class="translate-y-1 opacity-0"
                    enter-to-class="translate-y-0 opacity-100"
                    leave-active-class="transition duration-200 delay-75 transform-gpu ease-overstep"
                    leave-class="translate-y-0 opacity-100"
                    leave-to-class="translate-y-1 opacity-0"
                    mode="out-in"
                >
                    <svg
                        v-if="canNavigate(index)"
                        class="w-6 h-6 text-blue-300"
                        fill="none"
                        viewBox="0 0 23 22"
                        xmlns="http://www.w3.org/2000/svg"
                    >
                        <path
                            clip-rule="evenodd"
                            d="M0.218018 10.91C0.218018 4.88441 5.10242 0 11.128 0C17.1536 0 22.038 4.88441 22.038 10.91C22.038 16.9356 17.1536 21.82 11.128 21.82C5.10242 21.82 0.218018 16.9356 0.218018 10.91ZM15.1724 9.49934C15.3711 9.29357 15.4811 9.01798 15.4786 8.73193C15.4761 8.44587 15.3613 8.17223 15.1591 7.96995C14.9568 7.76767 14.6831 7.65293 14.3971 7.65045C14.111 7.64796 13.8354 7.75793 13.6297 7.95666L10.037 11.5493L8.62635 10.1387C8.42059 9.93993 8.145 9.82996 7.85894 9.83245C7.57289 9.83493 7.29925 9.94967 7.09697 10.152C6.89469 10.3542 6.77995 10.6279 6.77747 10.9139C6.77498 11.2 6.88495 11.4756 7.08368 11.6813L9.26568 13.8633C9.47027 14.0679 9.74772 14.1828 10.037 14.1828C10.3263 14.1828 10.6038 14.0679 10.8084 13.8633L15.1724 9.49934Z"
                            fill="currentColor"
                            fill-rule="evenodd"
                        />
                    </svg>

                    <span
                        v-else
                        :class="
                            currentStep === index
                                ? 'bg-blue-300'
                                : 'bg-gray-200'
                        "
                        class="flex items-center justify-center w-6 h-6 text-sm font-semibold leading-none text-white rounded-full font-sansEnglish"
                    >
                        <span class="leading-none"> {{ index + 1 }} </span>
                    </span>
                </transition>
                <span
                    class="text-sm font-medium leading-none md:whitespace-normal whitespace-nowrap"
                >
                    {{ $t(step) }}
                </span>
            </button>
            <span
                v-if="index + 1 < steps.length"
                class="w-[2px] h-3 mt-1 bg-gray-200 ltr:ml-3.5 rtl:mr-3.5 inline-block md:hidden"
            ></span>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        steps: Array,

        vertical: {
            type: Boolean,
            default: false,
        },

        currentStep: {
            type: Number,
            default: 0,
        },
    },
    methods: {
        navigateSteps(index) {
            if (this.canNavigate(index)) {
                this.$emit("update", JSON.parse(JSON.stringify(index)));
                // this.vistedSteps.add(index);
            }
        },
        canNavigate(index) {
            return (
                this.currentStep > index ||
                (this.vistedSteps.has(index) && this.currentStep !== index)
            );
        },
        nextStep() {
            const currentStep = this.currentStep;
            if (currentStep < this.steps.length - 1) {
                this.$emit(
                    "update",
                    JSON.parse(JSON.stringify(currentStep + 1))
                );
                // this.vistedSteps.add(currentStep + 1);
            }
        },
    },
    data() {
        return {
            vistedSteps: new Set([]),
        };
    },
    emits: ["update"],
    updated() {
        // this.vistedSteps.add(this.currentStep);
    },
};
</script>

<style></style>
