<script setup>
import { ref } from 'vue';
import VnCheckbox from './VnCheckbox.vue';
import axios from 'axios';
import { toRaw } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router';
const route = useRoute();
const { t } = useI18n();
const model = defineModel({ type: [Boolean] });
const props = defineProps({
    url: {
        type: String,
        required: true,
    },
    searchUrl: {
        type: [String, Boolean],
        default: 'table',
    },
});
const menuRef = ref(null);
const errorMessage = ref(null);
const rows = ref(0);
const onClick = async () => {
    errorMessage.value = null;

    const { filter } = JSON.parse(route.query[props.searchUrl]);
    filter.limit = 0;
    const params = {
        params: { filter: JSON.stringify(filter) },
    };
    try {
        const { data } = await axios.get(props.url, params);
        rows.value = data;
    } catch (error) {
        const response = error.response;
        if (response.data.error.name === 'UserError') {
            errorMessage.value = t('tooManyResults');
        } else {
            errorMessage.value = response.data.error.message;
        }
    }
};
defineEmits(['update:selected', 'select:all']);
</script>

<template>
    <QIcon
        style="margin-left: -10px"
        data-cy="btnMultiCheck"
        name="expand_more"
        @click="onClick"
        class="cursor-pointer"
        color="primary"
        size="xs"
    >
        <QMenu
            fit
            anchor="bottom start"
            self="top left"
            ref="menuRef"
            data-cy="menuMultiCheck"
        >
            <QList separator>
                <QItem
                    data-cy="selectAll"
                    v-ripple
                    clickable
                    @click="
                        $refs.menuRef.hide();
                        $emit('select:all', toRaw(rows));
                    "
                >
                    <QItemSection>
                        <QItemLabel>
                            <span v-text="t('Select all')" />
                        </QItemLabel>
                        <QItemLabel overline caption>
                            <span
                                v-if="errorMessage"
                                class="text-negative"
                                v-text="errorMessage"
                            />
                            <span
                                v-else
                                v-text="t('records', { rows: rows?.length ?? 0 })"
                            />
                        </QItemLabel>
                    </QItemSection>
                </QItem>
                <slot name="more-options"></slot>
            </QList>
        </QMenu>
    </QIcon>
</template>
<i18n lang="yml">
en:
    tooManyResults: Too many results. Please narrow down your search.
    records: '{rows} records'
es:
    Select all: Seleccionar todo
    tooManyResults: Demasiados registros. Restringe la búsqueda.
    records: '{rows} registros'
</i18n>
