<template>
    <div class="products-filters-popup">
        <div>
            <Button :icon="getIcon()" severity="secondary" rounded link @click="back()" />
            <h2>{{ $t(state) }}</h2>
            <Button v-if="state == 'filters'" link :label="$t('removeFilters')" @click="remove()" />
        </div>

        <div>
            <Transition>
                <div v-if="state == 'filters'">
                    <Button :label="$t('categories')" icon="isax isax-arrow-left-2" severity="secondary" link
                        @click="state = 'categories'" />
                    <Accordion expand-icon="isax left" collapse-icon="isax up">
                        <AccordionTab :header="$t('brand')">
                            <ul>
                                <li v-for="(brand, i) in data.brands" :key="i">
                                    <Checkbox v-model="brands" :value="brand.link" :input-id="i" />
                                    <label :for="i"> {{ brand.title }} </label>
                                </li>
                            </ul>
                        </AccordionTab>
                    </Accordion>
                    <div>
                        <label>{{ $t("availableInStock") }}</label>
                        <InputSwitch v-model="stock" />
                    </div>
                    <Accordion expand-icon="isax left" collapse-icon="isax up">
                        <AccordionTab :header="$t('priceRange')">
                            <ul>
                                <li>
                                    <span>{{ $t('from') }}</span>
                                    <InputNumber v-model="prices[0]" :sync="true" />
                                    <span>{{ $t('priceUnit') }}</span>
                                </li>
                                <li>
                                    <span>{{ $t('until') }}</span>
                                    <InputNumber v-model="prices[1]" :sync="true" />
                                    <span>{{ $t('priceUnit') }}</span>
                                </li>
                                <li>
                                    <Slider v-model="prices" :min="1000" :max="200000000" :step="1000" range />
                                </li>
                            </ul>
                        </AccordionTab>
                    </Accordion>
                </div>
                <PanelMenu v-else :model="categories" v-model:expandedKeys="expandedKeys">
                    <template #submenuicon="{ active }">
                        <i :class="'isax isax-arrow-' + (active ? 'up-2' : 'left-2')" />
                    </template>
                </PanelMenu>
            </Transition>
        </div>

        <div>
            <Button :label="loading ? $t('loading') : $t('viewProductCount', { count: data?.products.length })"
                icon="isax isax-arrow-up-2" severity="secondary" link @click="dialog.close()" :loading="loading" />
        </div>
    </div>
</template>

<script setup>
const route = useRoute()
const data = computed(() => route.meta.data || {})
const loading = computed(() => !route.meta.hasOwnProperty('data'))
const router = useRouter()

const dialog = inject('dialogRef')

const state = ref("filters");
const expandedKeys = ref({  });

const stock = ref('stock' in route.query)
const brands = ref([...(route.query?.brands?.split(',') ?? [])])
const prices = ref([...(route.query?.prices?.split(',').map(i => parseInt(i)) ?? [1000, 200000000])])

watch(brands, (v) => {
    const query = Object.assign({}, route.query)
    if (v?.length > 0)
        query.brands = v.join(',')
    else
        delete query.brands

    router.push({ query })
})
watch(stock, (v) => {
    const query = Object.assign({}, route.query)
    if (v)
        query.stock = true
    else
        delete query.stock

    router.push({ query })
})
let timer
watch(prices, (v) => {
    clearTimeout(timer)
    timer = setTimeout(() => {
        const query = Object.assign({}, route.query)
        const [$gte, $lte] = v
        query.prices = ''
        if ($gte > 1000 || $lte < 200000000)
            query.prices = v.join(',')
        else
            delete query.prices

        router.push({ query })
    }, 500)
}, { deep: true })


const catMap = (items) => {
    if (!items) return []
    const list = []
    try {
        items.forEach((cat) => {
            const temp = {
                key: cat._id,
                label: cat.name,
                class: route.query.category == cat.link ? 'active' : '',
                command: ({ originalEvent }) => {
                    if (cat.link && originalEvent.target.nodeName == 'SPAN') {
                        router.push({ query: { category: cat.link } })
                        back()
                    }
                }
            }
            if (cat.sub.length > 0) temp.items = catMap(cat.sub)
            list.push(temp)
        })
    } catch (error) {

    }
    return list
}
const categories = ref(catMap(data.value?.categories))

const back = () => {
    if (state.value == "filters") dialog.value.close();
    else state.value = "filters";
}

const remove = () => {
    router.push('/search')
    dialog.value.close()
}

const getIcon = () => 'isax isax-' + (state.value == 'filters' ? 'close-circle' : 'arrow-right-1')

</script>

<style lang="scss">
.products-filters-popup {
    @apply w-full flex flex-col bg-white rounded-t-[0.6rem];

    &>div:nth-of-type(1) {
        @apply flex items-center gap-3 p-6;

        h2 {
            @apply text-black text-sm font-medium font-vazir;
        }

        &>button {
            @apply -mx-4 -my-3 last:mr-auto last:text-primary-600;

            &:first-child {
                @apply text-xl text-black #{!important};
            }
        }
    }

    &>div:nth-of-type(2) {

        &>div:not(.p-panelmenu) {
            @apply flex flex-col px-6;

            &>button {
                @apply grow -mx-4 py-[1.1rem];

                .p-button-label {
                    @apply text-right text-zinc-800 text-sm font-bold font-vazir;
                }

                .p-button-icon {
                    @apply text-lg text-zinc-800;
                }
            }

            &>div.p-accordion {
                @apply py-[1.1rem] first-of-type:border-y-2 border-[#EBEBEB] font-vazir;

                .isax {
                    @apply text-lg;
                }

                .p-accordion-header-text {
                    @apply text-zinc-800 text-sm font-bold font-vazir #{!important};
                }

                &:nth-of-type(1) .p-accordion-content {
                    @apply pt-8 pb-4 rtl;

                    ul {
                        @apply flex flex-col gap-4;

                        li {
                            @apply flex items-center gap-3;

                            .p-checkbox {
                                @apply w-5 h-5 p-0.5 rounded border border-neutral-400;

                                .p-checkbox-box {
                                    @apply w-full h-full border-none;

                                    svg {
                                        @apply hidden;
                                    }
                                }
                            }

                            label {
                                @apply text-[#666666] text-sm font-bold cursor-pointer select-none;
                            }
                        }
                    }
                }

                &:nth-of-type(3) .p-accordion-content {
                    @apply pt-8 pb-4 rtl;

                    ul {
                        @apply flex flex-col gap-10 w-full;

                        li {
                            @apply flex justify-between items-end gap-[1.9rem] w-full;

                            &>span {
                                @apply text-[#666666] text-sm font-bold font-vazir grow;
                            }

                            input {
                                box-shadow: none;
                                @apply text-center w-[15rem] h-6 border-x-0 border-t-0 rounded-none #{!important};
                                @apply border-b-2 border-[#EBEBEB] text-[#333333] text-[1.4em] font-vazir;

                                &:focus {
                                    @apply border-primary-600;
                                }
                            }

                            div {
                                @apply w-full mt-4;

                                .p-slider-handle {
                                    @apply w-4 h-4 border-none bg-primary-600 -mt-2 focus:shadow-none;
                                }
                            }
                        }
                    }
                }
            }

            &>div:not([class]) {
                @apply flex items-center justify-between py-[1.1rem] border-b-2 border-[#EBEBEB];

                label {
                    @apply text-[#333333] text-sm font-bold font-vazir;
                }

                .p-inputswitch {
                    @apply w-[2.1rem] h-[1.1rem] bg-white;

                    .p-inputswitch-slider::before {
                        @apply w-[0.7rem] h-[0.7rem] -mt-[0.3rem];
                    }

                    &.p-highlight .p-inputswitch-slider::before {
                        @apply translate-x-4;
                    }
                }
            }
        }

        .p-panelmenu {
            @apply font-vazir text-sm font-bold flex flex-col gap-4 px-6 pb-4 rtl;

            .p-panelmenu-header {
                @apply flex;

                .p-panelmenu-header-action{
                    @apply h-4 flex gap-1;
                }
                &:not(:has(i)){
                    @apply pr-4;
                }
            }

            .p-toggleable-content {
                @apply w-full h-full overflow-y-auto pr-4 pt-2 self-end rtl;

            }

            .p-menuitem-link {
                @apply h-8 flex gap-1 #{!important};

                &:not(:has(i)){
                    @apply pr-4;
                }
            }

            .p-submenu-list{
                @apply pl-0;
            }

            .active>.p-panelmenu-header .p-menuitem-text ,
            .active>.p-menuitem-content .p-menuitem-text ,
            
            {
                @apply text-primary-600 #{!important};
            }
        }

    }

    &>div:nth-of-type(3) {
        @apply w-full mt-auto shadow-[0_-2px_5px_#0000000a];

        button {
            @apply w-full px-6 rounded-none;

            .p-button-label {
                @apply text-right text-stone-500 text-sm font-bold font-vazir rtl;
            }

            .p-button-icon {
                @apply text-lg text-zinc-800;
            }
        }
    }
}
</style>
