<template>
    <template v-if="userStore.isLoggedIn">
        <div class="orders">
            <div class="orders__list">
                <div class="orders__item" v-for="(order, index) in ordersStore.orders" :key="order.id">
                    <div class="orders__item-main">
                        <div class="orders__item-head">
                            <div>Заказ № {{ order.id }}</div>
                            <div>статус: {{ order.status }}</div>
                        </div>
                        <div>Стол: {{ order.table }}</div>
                        <div>Тяжесть: {{ order.heaviness.title }}</div>
                        <div>Вкус: {{ order.tastes.map((x) => x.title).join(", ") }}</div>
                        <div>Цена: {{ order.price }}</div>
                        <div
                            class="orders__item-favourite"
                            :class="{ 'orders__item-favourite--active': order.favourite }"
                            @click="toggleFavourite(order)"
                        >
                            <FontAwesomeIcon icon="star" />
                        </div>
                        <FontAwesomeIcon
                            class="orders__item-expand"
                            :class="{ 'orders__item-expand--active': index === expandedIndex }"
                            icon="chevron-down"
                            @click="toggleExpanded(index)"
                        />
                    </div>
                    <div class="orders__item-add" v-show="index === expandedIndex">
                        <ButtonComp type="primary" value="Повторить заказ" @click="repeatOrder(order)" />
                    </div>
                </div>
                <div class="orders__item" v-if="ordersStore.orders.length === 0">
                    У вас пока нет ни одного заказа...
                    <RouterLink class="orders__item-link" to="/hookah/table">Сделать заказ</RouterLink>
                </div>
            </div>
        </div>
    </template>
    <template v-else>
        <AuthorizationNeeded />
    </template>
</template>

<script setup lang="ts">
import AuthorizationNeeded from "@/components/HomeView/AuthorizationNeeded.vue";
import { useOrdersApi } from "@/composables/api";
import { useUserStore, useOrdersStore, useHookahStore } from "@/store";
import { order } from "@/types";
import { ref } from "vue";
import { useRouter } from "vue-router";

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

const expandedIndex = ref(-1);

async function toggleFavourite(order: order) {
    const resp = await ordersApi.toggleFavourite(order);

    if (resp) {
        order.favourite = !order.favourite;
    }
}

function toggleExpanded(index: number) {
    if (index === expandedIndex.value) {
        expandedIndex.value = -1;
    } else {
        expandedIndex.value = index;
    }
}

function repeatOrder(order: order) {
    hookahStore.selectedHeaviness = order.heaviness;
    hookahStore.selectedTastes = order.tastes;
    router.push("/hookah/table");
}
</script>

<style lang="scss">
.orders {
    position: absolute;
    top: 0;
    width: 100%;
    min-height: 100%;
    padding: r(20);

    &__list {
        display: flex;
        flex-direction: column;
        gap: r(20);
    }

    &__item {
        @include main-container;

        position: relative;
        padding: r(10);
    }

    &__item-main {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: r(5);
    }

    &__item-add {
        margin-top: r(10);
    }

    &__item-head {
        display: flex;
        justify-content: space-between;
        width: calc(100% - r(30));
    }

    &__item-favourite {
        position: absolute;
        top: 0;
        right: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: r(20);
        height: r(20);
        color: color("ui-background");
        transition: color 0.18s ease;
        cursor: pointer;

        &--active {
            color: color("theme-color");
        }
    }

    &__item-expand {
        position: absolute;
        bottom: 0;
        right: 0;
        width: r(20);
        height: r(20);
        color: color("ui-background");
        transition: transform 0.18s ease;
        cursor: pointer;

        &--active {
            transform: rotate(180deg);
        }
    }

    &__item-link {
        color: color("theme-color");
    }
}
</style>
