<template>
    <div class="container block mx-auto">
        <div class="flex flex-col gap-16 px-4 xl:flex-row">
            <BaseButtonLogin @click="openCategories = !openCategories" class="xl:hidden">{{
                $t("FrontTranslations", "Open categories & filters") }}</BaseButtonLogin>
            <Transition>
                <div v-if="openCategories" class="z-40 block w-full pt-8 xl:w-1/4 xl:pt-36 xl:hidden">
                    <BaseTitle>
                        {{ $t("FrontTranslations", "Categories") }}
                    </BaseTitle>
                    <div class="mt-14">
                        <div class="flex flex-col gap-12">
                            <div>
                                <CategoryTree :data="categoriesList" @change-category="changeCategory($event)"
                                    :active="categoryId" />
                            </div>
                            <div>
                                <p class="mb-8 text-2xl font-extrabold text-black dark:text-white">
                                    {{ $t("FrontTranslations", "Filtered by") }}
                                </p>

                                <div v-for="(item, itemIndex) in filters" :key="itemIndex" class="mb-8 text-white">
                                    <span
                                        class="flex justify-between font-bold text-black cursor-pointer 2xl:pr-24 dark:text-gray"
                                        @click="toggleFeature(item.feature)">
                                        {{ item.feature }}
                                        <span class="w-4 h-4 text-yellow"><i
                                                class="uil uil-angle-down text-2xl font-light cursor-pointer"></i></span>
                                    </span>
                                    <ul v-show="visibleFeatures[item.feature]"
                                        class="flex flex-col gap-8 pl-8 mt-8 text-black dark:text-gray">
                                        <li v-for="filter in item.feature_values" :key="filter.value_id"
                                            class="flex gap-1">
                                            <input :id="`${filter.value_id}`"
                                                :value="`${filter.parent}.${filter.value_id}`" v-model="selectedFilters"
                                                type="checkbox" />
                                            <label :for="`${filter.value_id}`">{{ filter.value }}</label>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </Transition>

            <div class="z-40 hidden w-full pt-8 xl:w-1/4 xl:pt-36 xl:block">
                <BaseTitle>
                    {{ $t("FrontTranslations", "Categories") }}
                </BaseTitle>
                <div class="mt-14 top-10">
                    <div class="flex flex-col gap-12">
                        <div>

                            <div v-if="categoriesList.length < 1" class="animate-pulse">
                                <div
                                    class="flex items-center justify-between mt-4 text-white rounded-lg cursor-pointer xl:pr-24">
                                    <div class="w-32 h-4 bg-gray-200 rounded"></div>
                                    <div class="w-4 h-4 bg-gray-200 rounded-full"></div>
                                </div>
                            </div>
                            <CategoryTree :data="categoriesList" @change-category="changeCategory($event)"
                                :active="categoryId" />
                        </div>
                        <div>
                            <p class="mb-8 text-2xl font-extrabold text-black dark:text-white">
                                {{ $t("FrontTranslations", "Filtered by") }}
                            </p>

                            <div v-if="filters.length < 1" class="mb-8 text-white animate-pulse">
                                <div v-for="i in 5"
                                    class="mt-10 flex justify-between font-bold text-black cursor-pointer 2xl:pr-24 dark:text-gray">
                                    <div class="w-32 h-4 bg-gray-200 rounded"></div>
                                    <div class="w-4 h-4 bg-gray-200 rounded"></div>
                                </div>
                            </div>

                            <div v-for="(item, itemIndex) in filters" :key="itemIndex" class="mb-8 text-white">
                                <span
                                    class="flex justify-between font-bold text-black cursor-pointer 2xl:pr-24 dark:text-gray"
                                    @click="toggleFeature(item.feature)">
                                    {{ item.feature }}
                                    <span class="w-4 h-4 text-yellow"><i
                                            class="uil uil-angle-down text-2xl font-light cursor-pointer"></i></span>
                                </span>
                                <ul v-show="visibleFeatures[item.feature]"
                                    class="flex flex-col gap-8 pl-8 mt-8 text-black dark:text-gray">
                                    <li v-for="filter in item.feature_values" :key="filter.value_id" class="flex gap-1">
                                        <input :id="`${filter.value_id}`" :value="`${filter.parent}.${filter.value_id}`"
                                            v-model="selectedFilters" type="checkbox" />
                                        <label :for="`${filter.value_id}`">{{ filter.value }}</label>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="w-full pt-20 xl:w-3/4">
                <ThePartnerInfo v-if="isInfo" @close-element="closeElement()" />

                <div v-if="products.length < 1" class="grid gap-12 pt-32 pb-16 md:grid-cols-2 2xl:grid-cols-3">
                    <TheProductSkeleton v-for="index in 6"></TheProductSkeleton>
                </div>

                <div v-else ref="loadingElement" class="grid gap-12 pt-32 pb-16 md:grid-cols-2 2xl:grid-cols-3">
                    <Product v-for="product in products" :key="product.id" :product="product" />
                    <div v-if="reachedEnd"
                        class="md:col-span-2 2xl:col-span-3 border-2 border-yellow border-r-0 border-l-0 mt-10">
                        <p class="text-black dark:text-gray text-center text-lg p-2">
                            {{ $t("FrontTranslations", "You reached end of the list.") }}
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
// import type { Product, Feature } from "~/types";
import Product from "./Product.vue";
const openCategories = ref(false);
const isInfo = ref<boolean>(true);
const selectedFilters = ref<any>([]);
const products = ref([] as Product[]);
const filters = ref([] as Feature[]);
const categoryId = ref<number>(1);
const itemsCount = ref(0);

const loading = ref(false);
const reachedEnd = ref(false);

const loadingElement = ref<HTMLElement | null>(null);

const page = ref(1);
const elems = ref(12);
const maxElements = ref(0);

async function getProducts() {
    try {
        const res = await fetch(
            `http://127.0.0.1:4000/api/public/products/category/${categoryId.value}?p=${page.value}&elems=${elems.value}`,
            {
                headers: {
                    "Content-Type": "application/json",
                },
            }
        );

        const data = await res.json();

        products.value = data.data.items;
        maxElements.value = data.data.items_count + 1;

    } catch (error) {
        console.error("getList error:", error);
    }
}

getProducts()

const closeElement = () => {
    isInfo.value = false;
};

onMounted(() => {
    window.addEventListener("scroll", scrollEvent);
});

onUnmounted(() => {
    window.removeEventListener("scroll", scrollEvent);
});

async function scrollEvent(e: Event) {
    let maxScrollY = window.scrollY || document.documentElement.scrollHeight - document.documentElement.clientHeight;

    if (window.scrollY >= maxScrollY - 500 && !reachedEnd.value && !loading.value) {
        loading.value = true;
        await loadMoreProducts();
        loading.value = false;
    }
}

// fetchWithCookie(useRequestEvent(), `public/products/category/1/classification`).then((res) => {
//     filters.value = res._data.data as Feature[];
//     filters.value.forEach((el) => {
//         const parentId = el.feature_id;
//         el.feature_values.forEach((el) => {
//             el.parent = parentId;
//         });
//     });
// });

const visibleFeatures = reactive<any>({});

filters.value.forEach((item) => {
    visibleFeatures[item.feature] = false;
});

function toggleFeature(feature: any) {
    if (visibleFeatures.hasOwnProperty(feature)) {
        visibleFeatures[feature] = !visibleFeatures[feature];
    } else {
        visibleFeatures[feature] = true;
    }
}

class FilteredQueryString extends URLSearchParams {
    append(name: string, value: string): void {
        if (value == null) {
            return;
        }

        super.append(name, value);
    }
}

async function loadMoreProducts() {
    let qParams = new FilteredQueryString();

    page.value = page.value + 1;

    qParams.append("p", `${page.value}`);
    qParams.append("elems", `${elems.value}`);
    qParams.append("features", selectedFilters.value.length > 0 ? selectedFilters.value : null);

    // await fetchWithCookie(useRequestEvent(), `public/products/category/${categoryId.value}?` + qParams.toString()).then((res) => {
    //     maxElements.value = res._data.data.items_count;

    //     if (res._data.data.items) {
    //         products.value.push(...(res._data.data.items as Product[]));
    //     } else {
    //         reachedEnd.value = true;
    //     }

    //     if (products.value.length >= maxElements.value) {
    //         reachedEnd.value = true;
    //     }
    // });
}

const categoriesList = ref([]);
// fetchWithCookie(useRequestEvent(), `public/categories/tree`).then((res) => {
//     categoriesList.value = res._data.data.children;
// });

const changeCategory = (item: any) => {
    categoryId.value = item.id;
};

watch(selectedFilters, async (newQuestion) => {
    if (newQuestion) {
        page.value = 1;
        reachedEnd.value = false;
        loadingElement.value?.scrollIntoView();

        let qParams = new FilteredQueryString();

        qParams.append("p", `${page.value}`);
        qParams.append("elems", `${elems.value}`);
        qParams.append("features", selectedFilters.value.length > 0 ? selectedFilters.value : null);

        // fetchWithCookie(useRequestEvent(), `public/products/category/1?` + qParams.toString()).then((res) => {
        //     products.value = res._data.data.items;
        //     maxElements.value = res._data.data.items_count;
        // });
    }
});

watch(categoryId, async (newQuestion) => {
    if (newQuestion) {
        page.value = 1;
        reachedEnd.value = false;
        loadingElement.value?.scrollIntoView();

        let qParams = new FilteredQueryString();

        qParams.append("p", `${page.value}`);
        qParams.append("elems", `${elems.value}`);
        qParams.append("features", selectedFilters.value.length > 0 ? selectedFilters.value : null);

        // fetchWithCookie(useRequestEvent(), `public/products/category/${categoryId.value}?` + qParams.toString()).then((res) => {
        //     products.value = res._data.data.items;
        //     maxElements.value = res._data.data.items_count;
        // });
    }
});
</script>

<style scoped>
.v-enter-active,
.v-leave-active {
    transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
    opacity: 0;
}
</style>