<template>
    <div class="flex flex-col flex-1 w-full max-w-[800px]">
        <TabGroup>
            <TabList
                class="flex gap-1 px-4 overflow-x-auto overflow-y-hidden max-w-7xl"
            >
                <Tab
                    v-for="tab in tabs"
                    :key="tab"
                    ref="tabRefs"
                    class="py-4 font-semibold focus:outline-none focus:border-none"
                    as="button"
                    v-slot="{ selected }"
                    @click="addUrlParam({ name: 'tab', value: tab })"
                >
                    <span
                        :class="[
                            'py-4 px-3 capitalize whitespace-nowrap',
                            selected
                                ? 'text-blue-300 border-b-[3px] border-blue-300'
                                : 'text-gray-200',
                        ]"
                    >
                        {{ $t("Register." + tab) }} ({{ counts[tab] }})
                    </span>
                </Tab>
            </TabList>
            <TabPanels class="max-w-7xl mt-0.5">
                <TabPanel as="div">
                    <OrdersList
                        :engineer="engineer"
                        :services="engineer.servicesOrders"
                    />
                </TabPanel>
                <TabPanel as="div">
                    <OrdersList :engineer="engineer" :services="pending" />
                </TabPanel>
                <TabPanel as="div">
                    <OrdersList :engineer="engineer" :services="open" />
                </TabPanel>
                <TabPanel as="div">
                    <OrdersList :engineer="engineer" :services="declined" />
                </TabPanel>
                <TabPanel as="div">
                    <OrdersList :engineer="engineer" :services="closed" />
                </TabPanel>
            </TabPanels>
        </TabGroup>
    </div>
</template>

<script setup>
import { TabGroup, TabList, Tab, TabPanels, TabPanel } from "@headlessui/vue";
import OrdersList from "@/Pages/Services/Engineer/Partials/OrdersList.vue";
import { onMounted, ref, computed } from "@vue/runtime-core";
import Card from "@/components/Containers/ContentCard";
import Button from "@/Jetstream/Button";
import { addUrlParam } from "@/composables/urlParams";

const props = defineProps({
    engineer: Object,
    orders: Object,
});
const tabs = ["all", "pending", "open", "declined", "completed"];

const tabRefs = ref([]);

const navigateToQueryTab = () => {
    const params = new URLSearchParams(window.location.search);
    const tab = params.get("tab")?.toLowerCase();
    if (tabs.includes(tab)) {
        const tabRef = tabRefs.value[tabs.indexOf(tab)];
        tabRef?.el?.click();
    }
};

const pending = computed(() => {
    return props.engineer.servicesOrders.filter((service) => {
        return service.status.toLowerCase() === "pending";
    });
});

const open = computed(() => {
    return props.engineer.servicesOrders.filter((service) => {
        return service.status.toLowerCase() === "in progress";
    });
});

const declined = computed(() => {
    return props.engineer.servicesOrders.filter((service) => {
        return service.status.toLowerCase() === "declined";
    });
});

const closed = computed(() => {
    return props.engineer.servicesOrders.filter((service) => {
        return service.status.toLowerCase() === "closed";
    });
});

const counts = computed(() => {
    return {
        all: props.engineer.servicesOrders.length,
        open: open.value.length,
        pending: pending.value.length,
        declined: declined.value.length,
        completed: closed.value.length,
    };
});

onMounted(() => {
    navigateToQueryTab();
});
</script>
