<template>
    <div
        class="flex flex-col-reverse w-full gap-5 mx-auto md:flex-row max-w-7xl"
    >
        <div class="flex flex-col flex-1 w-full max-w-[800px]">
            <TabGroup>
                <TabList
                    class="flex justify-between w-full max-w-2xl gap-1 px-4 overflow-x-auto"
                >
                    <Tab
                        v-for="tab in tabs"
                        :key="tab"
                        ref="tabRefs"
                        class="pt-4 font-semibold focus:outline-none focus:border-none"
                        as="button"
                        v-slot="{ selected }"
                        @click="addUrlParam({ name: 'tab', value: tab })"
                    >
                        <span
                            :class="[
                                ' px-1 mx-1 text-sm font-semibold  capitalize pb-3 inline-block whitespace-nowrap',
                                selected
                                    ? 'text-blue-300 border-b-[3px] border-blue-300'
                                    : 'text-gray-200 border-none',
                            ]"
                        >
                            {{ $t("Register." + tab) }} ({{ counts[tab] }})
                        </span>
                    </Tab>
                </TabList>
                <TabPanels class="max-w-7xl mt-0.5">
                    <TabPanel as="div">
                        <ProjectsList :client="client" :projects="projects" />
                    </TabPanel>
                    <TabPanel as="div">
                        <ProjectsList :client="client" :projects="open" />
                    </TabPanel>
                    <TabPanel as="div">
                        <ProjectsList :client="client" :projects="processing" />
                    </TabPanel>
                    <TabPanel as="div">
                        <ProjectsList :client="client" :projects="completed" />
                    </TabPanel>
                    <TabPanel as="div">
                        <ProjectsList :client="client" :projects="cancelled" />
                    </TabPanel>
                    <TabPanel as="div">
                        <ProjectsList :client="client" :projects="drafted" />
                    </TabPanel>
                </TabPanels>
            </TabGroup>
        </div>
        <div class="flex flex-col w-full gap-5 md:max-w-[240px] lg:max-w-xs">
            <Card>
                <div class="flex flex-col w-full gap-5">
                    <div class="flex items-center justify-center w-full">
                        <img
                            class="object-cover aspect-square w-[100px] h-[100px] rounded-full overflow-hidden"
                            :src="client.profile_photo_url"
                            alt="profile image"
                        />
                    </div>
                    <div
                        class="bg-blue-200 p-2.5 flex flex-col gap-5 rounded-lg"
                    >
                        <div class="text-sm font-medium text-gray-300">
                            {{ $t("Register.successful_projects") }}
                            <span class="block mt-1 text-green-300">
                                {{ client.total_purchases || 0 }}
                            </span>
                        </div>

                        <div class="text-sm font-medium text-gray-300">
                            {{ $t("Register.total_spent") }}

                            <span class="block mt-1 text-green-300">
                                {{ currency(client.total_purchases) }}
                            </span>
                        </div>
                    </div>
                    <Button
                        :href="route('client.projects.create')"
                        type="link"
                        size="full-sm"
                    >
                        <span
                            class="flex items-center justify-center w-full gap-1 text-center"
                        >
                            {{ $t("Register.create_project") }}
                        </span>
                    </Button>
                </div>
            </Card>
        </div>
    </div>
</template>

<script setup>
import { TabGroup, TabList, Tab, TabPanels, TabPanel } from "@headlessui/vue";
import ProjectsList from "@/Pages/Projects/Client/Partials/ProjectsList.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({
    client: Object,
    projects: Array,
});
const tabs = ["all", "open", "processing", "completed", "cancelled", "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 open = computed(() => {
    return props.projects.filter((project) => {
        return project.status?.toLowerCase() === "open";
    });
});

const processing = computed(() => {
    return props.projects.filter((project) => {
        return project.status?.toLowerCase() === "processing";
    });
});

const completed = computed(() => {
    return props.projects.filter((project) => {
        return project.status?.toLowerCase() === "completed";
    });
});

const cancelled = computed(() => {
    return props.projects.filter((project) => {
        return project.status?.toLowerCase() === "cancelled";
    });
});

const drafted = computed(() => {
    return props.projects.filter((project) => {
        return project.status?.toLowerCase() === "drafted";
    });
});

const counts = computed(() => {
    return {
        all: props.projects.length,
        open: open.value.length,
        processing: processing.value.length,
        completed: completed.value.length,
        cancelled: cancelled.value.length,
        drafted: drafted.value.length,
    };
});

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