<template>
    <template v-if="userStore.isLoggedIn">
        <div class="hookah" :class="'hookah--transition-direction--' + direction">
            <div class="hookah__navigation">
                <div class="hookah__navigation-title">Создаём заказ. {{ currentTabIndex < 3 ? "Выберите..." : "Проверьте..." }}</div>
                <div class="hookah__navigation-buttons">
                    <RouterLink
                        class="hookah__navigation-item hookah-navigation-item"
                        v-for="(tab, index) in tabs"
                        :key="tab.name"
                        :to="tab.path"
                        active-class="hookah-navigation-item--active"
                        :class="{ 'hookah-navigation-item--completed': isTabCompleted(index) }"
                        @click.prevent="changeTab(index)"
                    >
                        <div class="hookah-navigation-item__side" v-html="getSideShape('rect')" v-if="index === 0"></div>
                        <div class="hookah-navigation-item__side" v-html="getSideShape('left')" v-else></div>
                        <div class="hookah-navigation-item__text">{{ tab.name }}</div>
                        <div class="hookah-navigation-item__side" v-html="getSideShape('rect')" v-if="index === tabs.length - 1"></div>
                        <div class="hookah-navigation-item__side" v-html="getSideShape('right')" v-else></div>
                    </RouterLink>
                </div>
            </div>
            <div class="hookah__view">
                <RouterView v-slot="{ Component }" class="hookah__page">
                    <Transition name="hookah--transition">
                        <Component :is="Component" />
                    </Transition>
                </RouterView>

                <Transition name="hookah__view-button-container--transition">
                    <div class="hookah__view-button-container" v-show="navigationButtonShowed" @click="nextButtonClicked()">
                        <ButtonComp class="hookah__view-button" type="primary" value="Далее" />
                    </div>
                </Transition>
            </div>

            <div
                v-for="num in 3"
                :key="num"
                class="hookah__background-smoke"
                :class="`hookah__background-smoke--${num}`"
                :style="`opacity: ${getSmokeOpacity(num)}`"
            ></div>
            <div class="hookah__background-table" :style="`opacity: ${backgroundTableOpacity}`">
                {{ backgroundTableNumber }}
            </div>
        </div>
    </template>
    <template v-else>
        <AuthorizationNeeded />
    </template>
</template>

<script setup lang="ts">
import { computed, onActivated, ref, watch } from "vue";
import AuthorizationNeeded from "@/components/HomeView/AuthorizationNeeded.vue";
import { onBeforeRouteUpdate, useRoute, useRouter } from "vue-router";
import { useHookahStore, useUIStore, useUserStore } from "@/store";
const router = useRouter();
const route = useRoute();

const hookahStore = useHookahStore();
const userStore = useUserStore();
const uiStore = useUIStore();

const html = (val: any) => val;

const tabs = [
    { name: "Стол", path: "/hookah/table" },
    { name: "Тяжесть", path: "/hookah/heaviness" },
    { name: "Вкус", path: "/hookah/taste" },
    { name: "Итог", path: "/hookah/summary" },
];

const direction = ref("none");
const currentTabIndex = computed(() => {
    return getTabIndexByPath(route.path);
});

init();
function init() {
    router.push(getPreviousNotCompletedTab(3)?.path ?? tabs[3].path);
}
onActivated(() => init());

function getTabIndexByPath(path: string) {
    let tab = tabs.find((x) => path === x.path);
    return tab ? tabs.indexOf(tab) : -1;
}

function changeTab(index: number) {
    if (currentTabIndex.value === index) return;

    if (currentTabIndex.value > index) {
        direction.value = "left";
    } else {
        direction.value = "right";
    }

    router.push(tabs[index].path);

    setTimeout(() => {
        direction.value = "none";
    }, 200);
}

function getSideShape(type: "right" | "left" | "rect") {
    switch (type) {
        case "right":
            return html`
                <svg class="hookah-navigation-item__shape" viewbox="0 0 55 100">
                    <polygon points="0,0 5,0 55,50 5,100 0,100" />
                </svg>
            `;
        case "left":
            return html`
                <svg class="hookah-navigation-item__shape" viewbox="0 0 55 100">
                    <polygon points="0,0 55,0 55,100 0,100 50,50" />
                </svg>
            `;
        case "rect":
            return html`
                <svg class="hookah-navigation-item__shape" viewbox="0 0 51 100">
                    <polygon points="1,0 51,0 51,100 1,100" />
                </svg>
            `;
    }
}

const navigationButtonLeftShowed = computed(() => {
    if (direction.value != "none") return false;
    return currentTabIndex.value > 0;
});

const navigationButtonRightShowed = computed(() => {
    if (currentTabIndex.value >= tabs.length - 1) return false;
    if (direction.value != "none") return false;

    return isTabCompleted(currentTabIndex.value);
});

const navigationButtonShowed = computed(() => {
    if (currentTabIndex.value >= tabs.length - 1) return false;
    if (direction.value !== "none") return false;

    return isTabCompleted(currentTabIndex.value);
});

function nextButtonClicked() {
    const nextIncompletedTab = getNextNotCompletedTab(currentTabIndex.value);
    changeTab(tabs.indexOf(nextIncompletedTab));
}

function isTabCompleted(index: number) {
    switch (index) {
        case 0:
            return hookahStore.selectedTableNumber > 0;
        case 1:
            return hookahStore.selectedHeaviness != null;
        case 2:
            return hookahStore.selectedTastes.length > 0;
    }
}

function getPreviousNotCompletedTab(index: number) {
    for (let i = 0; i < index; i++) {
        if (!isTabCompleted(i)) {
            return tabs[i];
        }
    }
    return undefined;
}

function getNextNotCompletedTab(index: number) {
    for (let i = index; i < 3; i++) {
        if (!isTabCompleted(i)) {
            return tabs[i];
        }
    }
    return tabs[3];
}

function getSmokeOpacity(num: number) {
    if (hookahStore.selectedHeaviness && hookahStore.selectedHeaviness.id >= num - 1) {
        return uiStore.theme === "light" ? 1 : 0.1;
    }
    return 0;
}

const backgroundTableOpacity = ref(0);
const backgroundTableNumber = ref(0);

let backgroundTableTimeout: number;

function changeBackgroundTableNumber(to: number) {
    clearTimeout(backgroundTableTimeout);
    backgroundTableOpacity.value = 0;
    backgroundTableTimeout = setTimeout(() => {
        backgroundTableNumber.value = to;
        backgroundTableOpacity.value = to > 0 ? 1 : 0;
    }, 380);
}

watch(
    () => hookahStore.selectedTableNumber,
    (to) => {
        changeBackgroundTableNumber(to);
    }
);

onBeforeRouteUpdate((to) => {
    const tab = getPreviousNotCompletedTab(getTabIndexByPath(to.path));
    if (tab && to.path !== tab.path) {
        return tab.path;
    }
});
</script>

<style lang="scss">
.hookah {
    $p: &;

    display: flex;
    flex-direction: column;

    &__navigation {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: r(10) 0;
        gap: r(10);

        background: color("main-background");
        box-shadow: 0 r(2) r(2) 0 rgba(0, 0, 0, 0.14), 0 r(3) r(1) r(-2) rgba(0, 0, 0, 0.2), 0 r(1) r(5) 0 rgba(0, 0, 0, 0.12);
        z-index: 10;
    }

    &__navigation-buttons {
        --height: 4rem;

        display: flex;
        width: 100%;
        height: var(--height);
    }

    &__navigation-item {
        flex: 1 1 auto;
    }

    &__view {
        flex: 1;
        position: relative;
        width: 100%;
        z-index: 10;
    }

    &__view-button-container {
        position: absolute;
        inset: auto 0 r(40) 0;
        display: flex;
        justify-content: center;
        align-items: center;

        color: color("ui-color");
        cursor: pointer;

        &--transition {
            &-enter-active,
            &-leave-active {
                transition: opacity 0.18s ease;
            }

            &-enter-from,
            &-leave-to {
                opacity: 0;
            }
        }
    }

    &__view-button {
        width: 35%;
    }

    &__page {
        position: absolute;
        top: 0;
        width: 100%;
        min-height: 100%;
        padding: r(20);
    }

    &__background-smoke {
        position: absolute;
        inset: 0;
        background-image: url("@/assets/images/smoke.webp");
        background-size: r(1200);
        background-repeat: no-repeat;
        transition: opacity 0.38s ease;

        &--1 {
            background-position: 50% 40vh;
            z-index: 3;
        }

        &--2 {
            background-position: 25% 10vh;
            z-index: 2;
        }

        &--3 {
            background-position: 75% -20vh;
            z-index: 1;
        }
    }

    &__background-table {
        position: absolute;
        inset: auto 0 0 auto;
        padding: r(20);

        color: transparent;
        font-size: 30vh;
        font-style: italic;
        text-shadow: 0 0 r(8) color("ui-color", $alpha: -0.9);

        transition: opacity 0.38s ease;
        z-index: 4;
        user-select: none;
    }

    &--transition-direction {
        &--left {
            #{$p}--transition {
                &-enter-from {
                    transform: translateX(-100%);
                }
                &-leave-to {
                    transform: translateX(100%);
                }
            }
        }

        &--right {
            #{$p}--transition {
                &-enter-from {
                    transform: translateX(100%);
                }
                &-leave-to {
                    transform: translateX(-100%);
                }
            }
        }
    }

    &--transition {
        &-enter-active,
        &-leave-active {
            transition: all 0.1s ease;
        }
    }
}

.hookah-navigation-item {
    $p: &;

    display: flex;
    justify-content: space-between;
    align-items: center;

    &__side {
        height: var(--height);
        width: calc(var(--height + r(5)) / 2);
        margin: 0 r(-1);
    }

    &__shape {
        display: block;
        height: 100%;
        fill: color("ui-background");
        transition: fill 0.18s ease;
    }

    &__text {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        background: color("ui-background");
        color: color("ui-color-on-background");
        font-size: r(24);
        transition: background-color 0.18s ease;
    }

    &--completed {
        #{$p}__text {
            background: color("theme-color", $saturation: -50%);
        }

        #{$p}__shape {
            fill: color("theme-color", $saturation: -50%);
        }
    }

    &--active {
        #{$p}__text {
            background: color("theme-color");
        }

        #{$p}__shape {
            fill: color("theme-color");
        }
    }
}
</style>
