<template>
    <div class="row">
        <div class="col">
            <div class="row">
                <div class="col">
                    <loading-component style="height: 50px; top: 0;" key="1" color="success" v-show="isLoading"></loading-component>
                </div>
            </div>
            <div class="row" @keyup.enter="submitSearch()" v-show="!isLoading">
                <div class="col-12 col-md">
                    <choose-currency-component v-model:currency_id="filters.fixed_currency_id"></choose-currency-component>
                </div>
                <div class="col-12 col-md">
                    <choose-service-component v-model:service_id="filters.service_id" @loaded="doneLoadingServiceId"></choose-service-component>
                </div>
                <div class="col-12 col-md">
                    <validation-wrapper-component selectable :validator="v$.filters.status">
                        <label>Status</label>
                        <select-component :options="['Active', 'Complete']" v-model="filters.status"></select-component>
                    </validation-wrapper-component>
                </div>
                <div class="col-auto">
                    <div class="row h-100">
                        <div class="col">
                            <button type="button" class="btn btn-lg btn-primary w-100 h-100 d-block" @click="submitSearch()">Search</button>
                        </div>
                        <div class="col">
                            <button type="button" class="btn btn-lg btn-default w-100 h-100 d-block" @click="reset()">Reset</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row m-t-50" v-if="hasSubmited">
                <div class="col">
                    <list-component :key="searchKey" section="transferFiltersSection" :endpoint="route('api.booking.list')" :options="options">
                        <template #list="{ data }">
                            <booking-component :data="data"></booking-component>
                        </template>
                    </list-component>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useVuelidate } from '@vuelidate/core';
import route from '@/general/functions/router';

const isLoading = ref(true);
const searchKey = ref(1);
const hasSubmited = ref(false);
const options = ref<any>({
    per_page: 10
});
const filters = ref({
    fixed_currency_id: null as number | null,
    service_id: null as number | null,
    status: null as string | null,
});

const rules = {
    filters: {
        fixed_currency_id: {},
        service_id: {},
        status: {},
    }
};

const v$ = useVuelidate(rules, { filters });

const submitSearch = () => {
    options.value = {
        per_page: 10
    };

    if (filters.value.service_id != null) {
        options.value.service_id = filters.value.service_id;
    }

    if (filters.value.fixed_currency_id != null) {
        options.value.fixed_currency_id = filters.value.fixed_currency_id;
    }

    if (filters.value.status != null) {
        switch(filters.value.status) {
            case 'Active':
                options.value.status = '2';
                break;
            case 'Complete':
                options.value.status = '3';
                break;
        }
    }

    searchKey.value += 1;
    hasSubmited.value = true;
};

const reset = () => {
    hasSubmited.value = false;
    searchKey.value += 1;
};

const doneLoadingServiceId = () => {
    isLoading.value = false;

    const currency = new URL(location.href).searchParams.get('currency');
    if (currency != null) {
        switch (currency.toLowerCase()) {
            case 'usd':
                filters.value.fixed_currency_id = 3;
                submitSearch();
                break;
            case 'cny':
            case 'rmb':
                filters.value.fixed_currency_id = 2;
                submitSearch();
                break;
        }
    }
};
</script>
