<script setup lang="ts">
// imports

import useGetCategories from "~/composables/api/categories/useGetCategories";
import useGetProducts from "~/composables/api/products/useGetProducts";
import { useAppParams } from "~/composables/global/useAppParams";
import { PRODUCT_RANGE, PRODUCTS_SORTS } from "~/constants";

// state

const route = useRoute();
const router = useRouter();

const { sort, in_stock, has_discount, price_gte, price_lte, search, page, slug } = useAppParams();

const isSideShow = useState("side-modal-product-filters");

const currentCategory = computed({
    get: () => {
        return Array.isArray(slug.value) ? (slug.value[1] ?? undefined) : undefined;
    },
    set: (newValue) => {
        isSideShow.value = false;
        router.push({
            name: "products-slug",
            params: { slug: ["category", newValue] },
            query: { ...route.query, page: "1" },
        });
    },
});

const sliderValue = ref([price_gte.value ?? PRODUCT_RANGE.min, price_lte.value ?? PRODUCT_RANGE.max]);

const sliderValueDebounced = refDebounced(sliderValue, 1000);

// queries

const { data: categories, suspense } = useGetCategories();

await suspense();

const { isPending: productsIsPending } = useGetProducts();

// computed

const allCategories = computed(() => {
    return categories.value!.map((category) => {
        return {
            name: category.name,
            slug: category.slug,
            children: category.subcategorys.map((sub) => {
                return {
                    id: sub.id,
                    name: sub.name,
                    slug: sub.slug,
                };
            }),
        };
    });
});

// methods

const resetFilters = () => {
    search.value = "";
    sort.value = "";
    sliderValue.value = [PRODUCT_RANGE.min, PRODUCT_RANGE.max];
    has_discount.value = false;
    in_stock.value = false;
    page.value = 1;

    isSideShow.value = false;
};

// watch

watch(
    () => sliderValueDebounced.value,
    (newValue) => {
        price_gte.value = newValue[0];
        price_lte.value = newValue[1];
    },
);
</script>

<template>
    <div class="size-full flex flex-col gap-14 justify-between">
        <div class="w-full flex flex-col gap-8 lg:gap-10">
            <div class="flex flex-col items-center w-full gap-5">
                <div class="flex items-center justify-start gap-2 max-lg:text-sm w-full">
                    <Icon
                        name="ci:filter-list"
                        class="text-xl"
                    />
                    ترتیب بر اساس
                </div>
                <div class="w-full flex items-center gap-2">
                    <button
                        v-for="(sort_filter, index) in PRODUCTS_SORTS"
                        :key="index"
                        @click="sort = sort_filter.value"
                        :class="sort == sort_filter.value ? 'bg-black text-white' : 'bg-slate-100'"
                        class="py-1 px-3 cursor-pointer text-nowrap transition-all rounded-md text-xs lg:text-sm"
                    >
                        {{ sort_filter.title }}
                    </button>
                </div>
            </div>

            <div class="flex flex-col w-full gap-5">
                <div class="flex items-center justify-start gap-2 max-lg:text-sm w-full">
                    <Icon
                        name="ci:grid"
                        class="text-xl"
                    />
                    دسته بندی
                </div>
                <ComboBox
                    :options="allCategories"
                    v-model="currentCategory"
                />
            </div>

            <div class="flex flex-col w-full gap-5">
                <div class="flex items-center justify-start gap-2 max-lg:text-sm w-full">
                    <Icon
                        name="ci:scan-box"
                        class="text-xl"
                    />
                    محدوده قیمت
                </div>
                <SliderRoot
                    v-model="sliderValue"
                    class="relative flex items-center select-none touch-none h-5"
                    dir="rtl"
                    :min="PRODUCT_RANGE.min"
                    :max="PRODUCT_RANGE.max"
                    :step="1000"
                >
                    <SliderTrack class="bg-black/10 relative grow rounded-full h-[3px]">
                        <SliderRange class="absolute bg-black rounded-full h-full" />
                    </SliderTrack>
                    <SliderThumb
                        v-for="thumb in Object.keys(PRODUCT_RANGE)"
                        :key="thumb"
                        class="block w-5 h-5 bg-white border-2 border-slate-400 rounded-[10px] hover:bg-slate-100 focus:outline-none focus:shadow-[0_0_0_5px] focus:shadow-black/60"
                    />
                </SliderRoot>
                <div class="flex items-center justify-between">
                    <div class="flex-center gap-2 text-xs lg:text-sm">
                        <span class="text-black">حداقل</span>
                        <span class="text-black">
                            {{ sliderValue[0].toLocaleString() }}
                        </span>
                    </div>
                    <div class="flex-center gap-2 text-xs lg:text-sm">
                        <span class="text-black">حداکثر</span>
                        <span class="text-black">
                            {{ sliderValue[1].toLocaleString() }}
                        </span>
                    </div>
                </div>
            </div>

            <div class="flex items-center justify-between w-full gap-5">
                <span class="text-black max-lg:text-sm">فقط کالاهای تخفیف دار</span>
                <Switch v-model="has_discount" />
            </div>

            <div class="flex items-center justify-between w-full gap-5">
                <span class="text-black max-lg:text-sm">فقط کالاهای موجود</span>
                <Switch v-model="in_stock" />
            </div>
        </div>

        <div class="flex items-center gap-4 w-full">
            <Button
                :disabled="productsIsPending"
                variant="primary"
                @click="isSideShow = false"
                class="w-full rounded-xl py-3 !cursor-pointer disabled:pointer-events-none z-[3]"
            >
                <Transition
                    name="fade"
                    mode="out-in"
                >
                    <span class="flex-center gap-3 text-sm">
                        اعمال فیلتر
                        <Icon
                            name="ci:plus"
                            size="20"
                        />
                    </span>
                </Transition>
            </Button>
            <Button
                :disabled="productsIsPending"
                variant="solid"
                @click="resetFilters"
                class="w-full rounded-xl py-3 !cursor-pointer disabled:pointer-events-none z-[3]"
            >
                <Transition
                    name="fade"
                    mode="out-in"
                >
                    <span
                        v-if="productsIsPending"
                        class="flex-center gap-3 text-sm"
                    >
                        در حال دریافت اطلاعات
                        <Icon
                            name="ci:svg-spinners-3-dots-bounce"
                            size="20"
                        />
                    </span>
                    <span
                        v-else
                        class="flex-center gap-3 text-sm"
                    >
                        بازنشانی فیلتر ها
                        <Icon
                            name="ci:close"
                            size="20"
                        />
                    </span>
                </Transition>
            </Button>
        </div>
    </div>
</template>
