<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">
                <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">
                    <ServiceList
                        :engineer="engineer"
                        :services="engineer.services"
                    />
                </TabPanel>
                <TabPanel as="div">
                    <ServiceList :engineer="engineer" :services="published" />
                </TabPanel>
                <TabPanel as="div">
                    <ServiceList :engineer="engineer" :services="paused" />
                </TabPanel>
                <TabPanel as="div">
                    <ServiceList :engineer="engineer" :services="drafted" />
                </TabPanel>
            </TabPanels>
        </TabGroup>
    </div>
</template>

<script setup>
import { TabGroup, TabList, Tab, TabPanels, TabPanel } from "@headlessui/vue";
import ServiceList from "@/Pages/Services/Engineer/Partials/ServiceList.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,
    services: Array,
});
const tabs = ["all", "published", "paused", "drafted"];

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 published = computed(() => {
    return props.services.filter((service) => {
        return service.status.toLowerCase() === "published";
    });
});

const paused = computed(() => {
    return props.services.filter((service) => {
        return service.status.toLowerCase() === "paused";
    });
});

const drafted = computed(() => {
    return props.services.filter((service) => {
        return service.status.toLowerCase() === "draft";
    });
});

const counts = computed(() => {
    return {
        all: props.services.length,
        published: published.value.length,
        paused: paused.value.length,
        drafted: drafted.value.length,
    };
});

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