<template>
    <div class="hookah-summary">
        <div class="hookah-summary__container">
            <div>Стол: {{ hookahStore.selectedTableNumber }}</div>
            <div>Тяжесть: {{ hookahStore.selectedHeaviness?.title }}</div>
            <div>Вкус: {{ hookahStore.selectedTastes.map((x) => x.title).join(", ") }}</div>
            <div>Цена: {{ 123 }}</div>
            <ButtonComp :type="'primary'" :value="'Заказать'" @click="createOrder()" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { useHookahStore, useOrdersStore } from "@/store";
import { useOrdersApi } from "@/composables/api";
import { useRouter } from "vue-router";

const hookahStore = useHookahStore();
const ordersStore = useOrdersStore();
const ordersApi = useOrdersApi();
const router = useRouter();

async function createOrder() {
    const order = await tryCreateOrder();
    if (order) {
        ordersStore.createOrder(order);
        setTimeout(() => {
            hookahStore.clearSelected();
        }, 200);

        router.push("/orders");
    }
}

async function tryCreateOrder() {
    if (hookahStore.selectedHeaviness == null) return;

    const resp = await ordersApi.createOrder({
        table: hookahStore.selectedTableNumber,
        heavinessId: hookahStore.selectedHeaviness.id,
        tasteIds: hookahStore.selectedTastes.map((x) => x.id),
    });

    return resp;
}
</script>

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

    &__container {
        @include main-container;

        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex-wrap: wrap;
        gap: r(10);
        width: 80%;
        padding: r(15);
        z-index: 10;
    }
}
</style>
