<template>
    <div class="hookah-taste">
        <div class="hookah-taste__container">
            <div
                class="hookah-taste__item"
                :class="{ 'hookah-taste__item--active': hookahStore.selectedTastes.includes(item) }"
                v-for="item in hookahStore.tastesList"
                :key="item.id"
                @click="toggleTaste(item)"
            >
                {{ item.title }}
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useHookahStore } from "@/store";
import { taste } from "@/types";

const hookahStore = useHookahStore();

let maxSelectedTastesCount = 2;

function toggleTaste(taste: taste) {
    if (hookahStore.selectedTastes.includes(taste)) {
        hookahStore.selectedTastes = hookahStore.selectedTastes.filter((x) => x !== taste);
    } else {
        if (hookahStore.selectedTastes.length < maxSelectedTastesCount) {
            hookahStore.selectedTastes.push(taste);
        } else {
            console.log("can't select more than ", maxSelectedTastesCount);
        }
    }
}
</script>

<style lang="scss">
.hookah-taste {
    display: flex;
    justify-content: center;
    align-items: center;

    &__container {
        position: relative;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: r(10);
        width: 80%;
        z-index: 10;
    }

    &__item {
        @include main-container;

        display: flex;
        justify-content: center;
        align-items: center;
        padding: r(5) r(10);
        cursor: pointer;
        transition: 0.18s ease;
        transition-property: background-color, color, box-shadow;

        &--active {
            background: color("theme-color");
            color: color("ui-color-on-background");
            box-shadow: 0 r(2) r(2) 0 color("theme-color", $alpha: -0.86), 0 r(3) r(1) r(-2) color("theme-color", $alpha: -0.8),
                0 r(1) r(5) 0 color("theme-color", $alpha: -0.88);
        }
    }
}
</style>
