<template>
    <div class="row">
        <div class="col">
            <div class="row">
                <div class="col">
                    <div class="row">
                        <div class="col">
                            <img class="w-100" :src="asset('images/search-illustration.png')" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="row no-margin hint-text">
                <div class="col bg-master-lightest p-b-15 hint-text">
                    <div class="row m-b-15 p-t-10 p-b-10 bg-master-lighter">
                        <div class="col"><small class="all-caps muted fs-10">Filters</small></div>
                        <div class="col-auto">
                            <div class="row align-items-center text-info pointer">
                                <div class="col-auto p-r-0"><small class="all-caps fs-10">Advance</small></div>
                                <div class="col-auto p-l-0"><i class="fa fa-chevron-down fs-8 m-l-5" style=" margin-bottom: 3px; "></i></div>
                            </div>
                        </div>
                    </div>
                    <user-filters-component ref="filtersForm"></user-filters-component>
                    <div class="row m-t-15">
                        <div class="col">
                            <div class="bg-transparent text-center b-success b-a text-success fs-10 all-caps bold b-rad-none p-t-10 p-b-10 p-r-25 p-l-25 pointer" @click="updateFilters">
                                Apply filters
                            </div>
                        </div>
                    </div>
                    <div class="row m-t-10 text-center">
                        <div class="col">
                            <small class="all-caps fs-9 text-danger pointer" @click="resetForm(); updateFilters()">Clear Filters</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useQueueStore } from '@/stores/queue';

interface Props {
    section: string;
}

const props = defineProps<Props>();
const queueStore = useQueueStore();
const filters = ref<Record<string, any>>({});
const filtersForm = ref<any>(null);

const asset = (path: string) => (window as any).Vapor.asset(path);

const updateFilters = () => {
    if (queueStore.isInQueue(props.section)) {
        filters.value = { ...(queueStore.getListDetails(props.section)?.filters || {}) };
    } else {
        filters.value = queueStore.normalizeListFilters({});
    }

    const source = filtersForm.value?.parameters || {};
    Object.keys(source).forEach((key) => {
        const value = source[key];
        if (value) filters.value[key] = value;
        else if (key in filters.value) delete filters.value[key];
    });

    queueStore.updateListQueue({ name: props.section, page: 1, filters: filters.value });
};

const resetForm = () => {
    if (filtersForm.value && !filtersForm.value.data) {
        Object.assign(filtersForm.value.$data, filtersForm.value.$options.data.call(filtersForm.value));
    }
};
</script>
