<template>
    <div class="intro">
        <SliderComp class="intro__slider" type="default" :automatic="false" @index="sliderIndexChanged">
            <SliderTabComp>
                <div class="intro__tab-content">
                    <div class="intro__tab-image-container">
                        <img class="intro__tab-image" src="/media/images/intro-image-1.webp" />
                    </div>
                    <div class="intro__tab-text">Подпись для первой картинки</div>
                </div>
            </SliderTabComp>
            <SliderTabComp>
                <div class="intro__tab-content">
                    <div class="intro__tab-image-container">
                        <img class="intro__tab-image" src="/media/images/intro-image-2.webp" />
                    </div>
                    <div class="intro__tab-text">Подпись для второй картинки</div>
                </div>
            </SliderTabComp>
            <SliderTabComp>
                <div class="intro__tab-content">
                    <div class="intro__tab-image-container">
                        <img class="intro__tab-image" src="/media/images/intro-image-3.webp" />
                    </div>
                    <div class="intro__tab-text">Подпись для третьей картинки</div>
                </div>
            </SliderTabComp>
        </SliderComp>
        <Transition name="intro__additional-container--transition">
            <div class="intro__additional-container" v-show="isAdditionalShowed">
                <div class="intro__additional-button" @click="additionalAction()">вход</div>
            </div>
        </Transition>
    </div>
</template>

<script setup lang="ts">
import { useUserStore } from "@/store";
import { ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const userStore = useUserStore();

const isAdditionalShowed = ref(false);

function sliderIndexChanged(index: number) {
    isAdditionalShowed.value = index === 2;
}

function additionalAction() {
    userStore.introWatched = true;
    userStore.saveData();
    router.push("/login");
}
</script>

<style lang="scss">
.intro {
    position: relative;
    height: 100%;
    width: 100%;

    &__slider {
        width: 100%;
    }

    &__tab-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 100%;
        padding: r(60) 0;
    }

    &__tab-image-container {
        flex: 8;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 0;
    }

    &__tab-image {
        max-width: 80%;
        max-height: 100%;
    }

    &__tab-text {
        flex: 2;
        display: flex;
        align-items: center;
        max-width: 90%;
        text-align: center;
    }

    &__additional-container {
        position: absolute;
        bottom: r(60);
        display: flex;
        justify-content: center;
        width: 100%;

        &--transition {
            &-enter-active,
            &-leave-active {
                transition: 0.28s ease;
                transition-property: bottom, opacity;
            }

            &-enter-from,
            &-leave-to {
                bottom: r(30);
                opacity: 0;
            }
        }
    }

    &__additional-button {
        display: flex;
        justify-content: center;
        width: r(150);
        padding: r(5) 0;
        border: r(1) solid color("main-color");
        border-radius: r(16);
        color: color("main-color");
        cursor: pointer;
    }
}
</style>
