<script setup>
import { reactive, watch } from 'vue';
import AppIcon from './AppIcon.vue';
import { boot } from '../format';

/**
 * Search and filter. Selects and dates apply the moment they change; typing in
 * the search box applies once you stop typing, so the list keeps up without a
 * request per keystroke.
 */
const props = defineProps({
    filters: { type: Object, required: true },
    categories: { type: Array, default: () => [] },
    isFiltered: { type: Boolean, default: false },
    busy: { type: Boolean, default: false },
});

const emit = defineEmits(['apply', 'reset']);

const draft = reactive({ ...props.filters });

// Keeps the inputs honest when the filters change elsewhere (reset, back button).
watch(() => ({ ...props.filters }), (next) => Object.assign(draft, next));

let searchTimer = null;

function apply() {
    clearTimeout(searchTimer);
    emit('apply', { ...draft });
}

function onSearchInput() {
    clearTimeout(searchTimer);
    searchTimer = setTimeout(apply, 450);
}
</script>

<template>
    <section class="panel no-print">
        <div class="panel-head">
            <span class="head-icon"><AppIcon name="sliders" :size="16"/></span>
            <span class="panel-title">খুঁজুন ও ফিল্টার করুন</span>
            <span v-if="isFiltered" class="spacer"></span>
            <button v-if="isFiltered" type="button" class="btn btn-quiet btn-sm" @click="emit('reset')">
                <AppIcon name="rotate" :size="15"/>
                রিসেট
            </button>
        </div>

        <form class="panel-body filters" @submit.prevent="apply">
            <div class="field field-search">
                <label for="f-q">খুঁজুন</label>
                <div class="control has-icon">
                    <AppIcon name="search" :size="16"/>
                    <input id="f-q" v-model="draft.q" type="search" placeholder="বিবরণ, মন্তব্য বা ক্যাটাগরি…"
                           @input="onSearchInput">
                </div>
            </div>

            <div class="field">
                <label for="f-cat">{{ boot.labels.category }}</label>
                <select id="f-cat" v-model="draft.category_id" @change="apply">
                    <option value="">সব ক্যাটাগরি</option>
                    <option v-for="category in categories" :key="category.id" :value="String(category.id)">
                        {{ category.name }}
                    </option>
                </select>
            </div>

            <div class="field">
                <label for="f-pay">{{ boot.labels.payment_method }}</label>
                <select id="f-pay" v-model="draft.payment_method" @change="apply">
                    <option value="">সব মাধ্যম</option>
                    <option v-for="method in boot.payment_methods" :key="method" :value="method">{{ method }}</option>
                </select>
            </div>

            <div class="field">
                <label for="f-from">তারিখ থেকে</label>
                <input id="f-from" v-model="draft.from" type="date" @change="apply">
            </div>

            <div class="field">
                <label for="f-to">তারিখ পর্যন্ত</label>
                <input id="f-to" v-model="draft.to" type="date" @change="apply">
            </div>

            <div class="filter-actions">
                <button type="submit" class="btn btn-primary" :disabled="busy">
                    <AppIcon :name="busy ? 'rotate' : 'filter'" :size="16" :class="{ 'is-spinning': busy }"/>
                    ফিল্টার
                </button>
            </div>
        </form>
    </section>
</template>
