<script setup>
    import { onMounted, ref, watch } from 'vue';
    import { useCompanyStore } from '../stores/company';
    import { useAuthStore } from '../stores/auth';
    import Spiner from '../components/ui/Spiner.vue';
    import CardBudget from '../components/CardBudget.vue';
    import CardEmpty from '../components/CardEmpty.vue';
    import CreateBudgetModal from '../components/CreateBudgetModal.vue';
    import Pagination from '../components/Pagination.vue';
    import { useI18n } from 'vue-i18n';

    const companyStore = useCompanyStore();
    const authStore = useAuthStore();

    const loading = ref(false);
    const filterQuery = ref([]);
    const query = ref('');
    const currentBudget = ref(null);
    const openModal = ref(false);
    const printOpen = ref(false);
    const limit = 10;

    const { t } = useI18n();

    onMounted(() => {
        getInitData();
    })

    const getInitData = async() => {
        loading.value = true;
        filterQuery.value.limit = "elements=" + limit;
        filterQuery.value.page = "page=" + 0;
        filterQuery.value.company = "company="+ localStorage.getItem('id');
        await companyStore.getBudgetsCompany(filterQuery.value, false)
        loading.value = false;
    }

    const getBudgetsWithFilters = async(filter) => {
        loading.value = true;
        await companyStore.getBudgetsCompany(filter, true);
        loading.value = false;
    }

    watch(query, () => {
        filterQuery.value.page = "page=" + 0;
        filterQuery.value.limit = "elements=" + 100;
        if(query.value.length === 0){
            clearRequest();
            filterQuery.value.search = "";
            getBudgetsWithFilters(filterQuery.value);
        }
    });

    const search = () => {
        if(query.value.length >= 2){
            // filterQuery.value = "company_name[$regex]=" + query.value + "&company_name[$options]=i";
            filterQuery.value.search = "client[$regex]="+query.value+"&client[$options]=i";
            getBudgetsWithFilters(filterQuery.value);
        } 
    
    }

    const getBudgetsByPage = async(data) => {
        loading.value = true;
        filterQuery.value.page = "page="+ data.page;
        companyStore.budgetsCurrentPage = data.page
        await getBudgetsWithFilters(filterQuery.value)
        loading.value = false;
    }

    const clearFilter = () => {
        clearRequest();
        filterQuery.value.search = "";
        filterQuery.value.company = "company="+ localStorage.getItem('id');

        if(query.value == ''){
            getInitData();
        } else {
            query.value = '';
        }
    }

    const clearRequest = () => {
        filterQuery.value.page = "page=" + 0;
        filterQuery.value.limit = "elements="+ limit;
        companyStore.budgetsCurrentPage = 1;
    }

    const handleSetCurrentBudget = (data) => {
        openModal.value = true;
        currentBudget.value = data.budget;
        if(data.print) {
            printOpen.value = true
        }
    }

    const handleResetCurrentBudget = () => {
        openModal.value = false;
        currentBudget.value = null;
        printOpen.value = false;
    }

</script>

<template>
    <CreateBudgetModal
        v-if="openModal === true"
        :budget="currentBudget"
        :is-print="printOpen"
        @reset-budget="handleResetCurrentBudget"
    />
    <div>
        <h2 class="title my-2">{{t('calculator.title')}}</h2>
    </div>
    <div class="box-filters">
        <div class="box-search">
            <input class="form-control custom-search" type="search" name="" :placeholder="t('calculator.querySearch')" id="" @:input="search()" v-model="query" aria-label="Search">
        </div>
        <button 
            class="btn btn-danger bg-dark" type="button" @click="clearFilter">
            <i class="fa-solid fa-arrow-rotate-right"></i>
            <span class="clear-sm"> Reset </span><span class="clear-md"> {{ t('labels.filters') }}</span>
        </button>
        <button
            class="btn-primary-sm radius-sm"
            data-toggle="modal" data-target="#budgetModal"
            @click="handleSetCurrentBudget({budget: null, print: false})"
            v-html="t('calculator.create')"
        ></button>
    </div>
    <Spiner v-if="loading"/>
    <div v-else>
        <CardBudget
            v-if="companyStore.budgets.length > 0"
            v-for="budget in companyStore.budgets"
            :budget="budget"
            @set-budget="handleSetCurrentBudget"
        />
        <CardEmpty 
            v-else 
            text="No hay presupuestos agregados"
        />
        <Pagination
            :limit="limit"
            :total="companyStore.budgetsTotal"
            :current-page="companyStore.budgetsCurrentPage"
            @get-elements="getBudgetsByPage"
        />
    </div>
</template>

<style scoped>
    .box-filters {
        display: flex;
        flex-direction: row;
        justify-content: end;
        gap: 1rem;
        margin: 1.5rem 0px;
    }

    .box-search {
        flex: 1;
    }
    .custom-search {
        width: 100%;
        padding: 12px 20px;
    }

    @media (max-width: 1024px) {
        .box-filters {
            gap: .4rem;
        }
    }

    @media (max-width: 768px) {

        .box-search {
            width: 100%;
        }
        .box-filters {
            gap: .3rem;
        }
    }
</style>