<template>
    <div class="home">
        <div class="home__slider-promo">
            <div class="home__slider-promo-title">Акции</div>
            <SliderComp type="infinite" :automatic="true">
                <SliderTabComp>
                    <ImageComp class="home__slider-promo-image" src="/media/images/promo.webp" @click="openModal(0)" />
                    <ModalComp :ref="(elem: any) => {refModal.push(elem as InstanceType<typeof ModalComp>)}">
                        <ImageComp class="home__slider-promo-image" src="/media/images/promo.webp" />
                        <div class="home__slider-promo-text">Текст акции 1</div>
                    </ModalComp>
                </SliderTabComp>
                <SliderTabComp>
                    <ImageComp class="home__slider-promo-image" src="/media/images/promo.webp" @click="openModal(1)" />
                    <ModalComp :ref="(elem: any) => {refModal.push(elem as InstanceType<typeof ModalComp>)}">
                        <ImageComp class="home__slider-promo-image" src="/media/images/promo.webp" />
                        <div class="home__slider-promo-text" home__slider-image>Текст акции 2</div>
                    </ModalComp>
                </SliderTabComp>
                <SliderTabComp>
                    <ImageComp class="home__slider-promo-image" src="/media/images/promo.webp" @click="openModal(2)" />
                    <ModalComp :ref="(elem: any) => {refModal.push(elem as InstanceType<typeof ModalComp>)}">
                        <ImageComp class="home__slider-promo-image" src="/media/images/promo.webp" />
                        <div class="home__slider-promo-text">Текст акции 3</div>
                    </ModalComp>
                </SliderTabComp>
            </SliderComp>
        </div>
        <div class="home__slider" v-if="ordersStore.orders.length > 0">
            <div class="home__slider-title">Последние заказы</div>
            <div class="home__slider-list">
                <div class="home__slider-item" v-for="order in ordersStore.orders.sort((a, b) => b.id - a.id)" :key="order.id">
                    <div>Заказ № {{ order.id }}</div>
                    <div>Стол: {{ order.table }}</div>
                    <div>Тяжесть: {{ order.heaviness.title }}</div>
                    <div>Вкус: {{ order.tastes.map((x) => x.title).join(", ") }}</div>
                </div>
            </div>
            <div class="home__slider-footer"></div>
        </div>
        <div class="home__slider" v-if="ordersStore.favouriteOrders.length > 0">
            <div class="home__slider-title">Любимые кальяны</div>
            <div class="home__slider-list">
                <div class="home__slider-item" v-for="order in ordersStore.favouriteOrders.sort((a, b) => b.id - a.id)" :key="order.id">
                    <div>Тяжесть: {{ order.heaviness.title }}</div>
                    <div>Вкус: {{ order.tastes.map((x) => x.title).join(", ") }}</div>
                </div>
            </div>
            <div class="home__slider-footer"></div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useOrdersStore } from "@/store";
import { ref } from "vue";
import ModalComp from "@/components/UI/ModalComp.vue";

const refModal = ref<InstanceType<typeof ModalComp>[]>([]);

const ordersStore = useOrdersStore();

function openModal(index: number) {
    refModal.value[index].open();
}
</script>

<style lang="scss">
.home {
    position: absolute;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: r(20);
    min-height: 100%;
    width: 100%;
    padding: r(20) 0;

    &__slider-promo {
        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);
    }

    &__slider-promo-title {
        font-size: r(25);
        padding: r(10) r(20);
    }

    &__slider-promo-image {
        width: 100%;
    }

    &__slider-promo-text {
        margin-top: r(20);
    }

    &__slider-title {
        padding: r(10) r(30);
        //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);
    }

    &__slider {
        @include main-container;

        display: flex;
        flex-direction: column;
        gap: r(1);
        background: color("main-background");
    }

    &__slider-list {
        display: flex;
        gap: r(20);
        padding: r(5) r(20);
        overflow-x: auto;

        @media (max-width: $mobileWidth) {
            -ms-overflow-style: none;
            scrollbar-width: none;

            &::-webkit-scrollbar {
                display: none;
            }
        }
    }

    &__slider-footer {
        height: r(15);
        //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);
    }

    &__slider-item {
        @include main-container;

        min-width: 60%;
        padding: r(10);
        box-shadow: 0 r(2) r(2) 0 rgba(0, 0, 0, 0.34), 0 r(3) r(1) r(-2) rgba(0, 0, 0, 0.5), 0 r(1) r(5) 0 rgba(0, 0, 0, 0.32);
    }
}
</style>
