<template>
    <div class="navigation-bar">
        <template v-for="tab in tabs" :key="tab.index">
            <RouterLink
                class="navigation-bar__item"
                :class="{
                    'navigation-bar__item--center': tab.isCenter,
                }"
                :to="tab.path"
                :active-class="'navigation-bar__item--active'"
            >
                <div class="navigation-bar__icon-container">
                    <FontAwesomeIcon class="navigation-bar__icon" :icon="tab.icon" />
                    <div class="navigation-bar__icon-counter" v-if="tab.counter?.value">
                        {{ tab.counter }}
                    </div>
                </div>
                <div class="navigation-bar__item-name">
                    {{ tab.name }}
                </div>
            </RouterLink>
        </template>
    </div>
</template>

<script setup lang="ts">
import { useOrdersStore } from "@/store";
import { ref, computed, nextTick } from "vue";
// router
import { onBeforeRouteUpdate, useRoute, useRouter } from "vue-router";
const router = useRouter();
const route = useRoute();
const emit = defineEmits(["direction"]);
const ordersStore = useOrdersStore();

const tabs = [
    { path: "/home", name: "Лента", icon: "house" },
    { path: "/menu", name: "Меню", icon: "bars" },
    { path: "/hookah", name: "Кальян", isCenter: true, icon: "bottle-droplet" },
    {
        path: "/orders",
        name: "Заказы",
        icon: "file-lines",
        counter: computed(() => ordersStore.orders.filter((x) => x.status !== "completed").length),
    },
    { path: "/user", name: "Профиль", icon: "user" },
];

const currentTabIndex = computed(() => {
    let tab = tabs.find((x) => route.path.includes(x.path));
    if (!tab) return -1;
    return tabs.indexOf(tab);
});

onBeforeRouteUpdate((to) => {
    const tabTo = tabs.find((x) => to.path.includes(x.path));
    if (tabTo) {
        if (currentTabIndex.value === tabs.indexOf(tabTo)) return;

        if (currentTabIndex.value > tabs.indexOf(tabTo)) {
            emit("direction", "left");
        } else {
            emit("direction", "right");
        }

        setTimeout(() => {
            emit("direction", "none");
        }, 200);
    }
});
</script>

<style lang="scss">
.navigation-bar {
    $p: &;

    display: flex;
    height: r(60);
    font-size: r(16);
    color: color("ui-background");
    user-select: none;
    box-shadow: 0 r(-4) r(20) 0 hsla(0, 0%, 0%, 0.12), 0 r(-7) r(12) r(-5) hsla(0, 0%, 0%, 0.15);

    z-index: 50;

    &__item {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        padding: r(5) 0;
        cursor: pointer;

        &--center {
            #{$p}__icon {
                width: r(40);
                height: r(40);
                padding: r(6);
                color: color("main-background");
                background: color("ui-background");
                border-radius: 50%;
            }

            #{$p}__icon-container {
                bottom: r(22);
                width: r(60);
                height: r(60);
                background: color("main-background");
                border-radius: 50%;
                box-shadow: 0 r(-4) r(20) 0 hsla(0, 0%, 0%, 0.12), 0 r(-7) r(12) r(-5) hsla(0, 0%, 0%, 0.15);

                &::before {
                    content: "";
                    position: absolute;
                    top: r(22);
                    width: 150%;
                    height: r(58);
                    background: color("main-background");
                }
            }
        }

        &--active {
            #{$p}__item-name {
                color: color("main-color");
            }
        }

        &--active#{&}:not(&--center) {
            #{$p}__icon {
                color: color("theme-color");
            }
        }

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

    &__item-name {
        transition: color 0.18s ease;
        z-index: 2;
    }

    &__icon {
        z-index: 1;
        width: 100%;
        height: 100%;
        transition: background-color 0.18s ease, color 0.18s ease;
    }

    &__icon-counter {
        z-index: 2;
        position: absolute;
        top: -25%;
        right: -25%;
        display: flex;
        justify-content: center;
        align-items: center;
        width: r(20);
        height: r(20);
        border-radius: 50%;
        color: color("ui-color-on-background");
        background: color("warning-color");
    }

    &__icon-container {
        position: absolute;
        bottom: r(25);
        display: flex;
        justify-content: center;
        align-items: center;
        width: r(28);
        height: r(28);
    }
}
</style>
