<script setup lang="ts">
import { useRouter } from "vue-router";

import GalleryItem from './item.vue';
import KLogo from "../../assets/promo/logo.svg";
import { useItem } from "../../stores/item";

const router = useRouter()
const pageStore = useItem()

const startColor = `hsl(${(Math.random() * 360).toFixed()}, 100%, 50%)`
const endColor = `hsl(${(Math.random() * 360).toFixed()}, 100%, 50%)`
</script>
<template>
    <div class="main">
        <div class="pin" @click="router.push(`/${pageStore.page.slug}/${pageStore.page.scene_3d}`)">
            <KLogo />
        </div>
        <GalleryItem :files="pageStore.page.images" v-if="pageStore.page.images && pageStore.page.images.length" />
    </div>
</template>
<style scoped lang="scss">
* {
    --logo-start-color: v-bind(startColor);
    --logo-end-color: v-bind(endColor);
    --anim-time: 4s;
}

.main {
    width: 100vw;
    height: 100vh;

    background-image: url(../../assets/promo/map.png);
    background-position: 50% 100%;
    background-size: auto 100%;
    overflow: hidden;
}

.pin {
    cursor: pointer;

    border-radius: 0.25rem;
    overflow: hidden;

    position: absolute;
    bottom: 20vh;
    left: calc(50% - 1vw);

    color: white;

    width: 4rem;
    height: 4rem;
    padding: 0.25rem;

    animation: bounce2 var(--anim-time) ease infinite;
    transition: all 300ms linear;

    &::before {
        content: '';
        position: absolute;
        top: -2rem;
        right: -2rem;
        bottom: -2rem;
        left: -2rem;
        background-image: linear-gradient(var(--logo-start-color), var(--logo-end-color));
        animation: bounce2grad var(--anim-time) ease infinite;
        z-index: -1;
    }

    svg {
        max-width: 100%;
        max-height: 100%;
        color: #fff;
        fill: currentColor;
    }

    &:hover {
        // animation-play-state: paused;
        animation: none;
        transform: scale(1.5);

        &::before {
            // animation-play-state: paused;
        }
    }

}

@keyframes bounce2grad {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: rotate(90deg)
    }

    40% {
        transform: rotate(60deg);
    }

    60% {
        transform: rotate(20deg);
    }
}

@keyframes bounce2 {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0) scale(1.5);
    }

    40% {
        transform: translateY(-2rem);
    }

    60% {
        transform: translateY(-1rem);
    }
}
</style>