<script setup>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import axios from 'axios';
import VnSelect from 'src/components/common/VnSelect.vue';
import VnInput from 'src/components/common/VnInput.vue';

const props = defineProps({
    tags: {
        type: Array,
        default: () => [],
    },
});

const emit = defineEmits(['applyTags']);
const { t } = useI18n();

const tagValues = ref([{}]);
const tagOptions = ref([]);
const selectedTag = ref(null);

const applyTags = () => {
    if (tagValues.value.some((tag) => !tag.value)) return;
    const tagInfo = {
        values: [...tagValues.value],
        tagFk: selectedTag?.value?.id,
        tagSelection: {
            name: selectedTag?.value?.name,
        },
    };
    emit('applyTags', tagInfo);
};

const getSelectedTagValues = async (tag) => {
    if (!tag?.id) return;
    const filter = {
        fields: ['value'],
        order: 'value ASC',
    };

    const url = `Tags/${tag?.id}/filterValue`;
    const params = { filter: JSON.stringify(filter) };
    const { data } = await axios.get(url, {
        params,
    });
    tagOptions.value = data;
};
</script>

<template>
    <QForm @submit="applyTags()" class="all-pointer-events">
        <QCard class="q-pa-sm column q-pa-lg" data-cy="catalogFilterValueDialog">
            <VnSelect
                :label="t('params.tag')"
                v-model="selectedTag"
                :options="props.tags"
                option-value="id"
                option-label="name"
                dense
                outlined
                class="q-mb-md"
                rounded
                :emit-value="false"
                use-input
                @update:model-value="getSelectedTagValues"
                data-cy="catalogFilterValueDialogTagSelect"
            />
            <div
                v-for="(value, index) in tagValues"
                :key="value"
                class="filter-value column align-left"
            >
                <div class="col row q-mb-md">
                    <VnSelect
                        v-if="!selectedTag?.isFree && tagOptions"
                        :label="t('components.itemsFilterPanel.value')"
                        v-model="value.value"
                        :options="tagOptions"
                        option-value="value"
                        option-label="value"
                        dense
                        outlined
                        rounded
                        emit-value
                        use-input
                        :disable="!value || !selectedTag"
                        :is-clearable="false"
                        class="col"
                    />
                    <VnInput
                        v-else
                        v-model="value.value"
                        :label="t('components.itemsFilterPanel.value')"
                        :disable="!value"
                        is-outlined
                        class="col"
                        data-cy="catalogFilterValueDialogValueInput"
                    />
                    <QBtn
                        icon="delete"
                        size="md"
                        outlined
                        dense
                        rounded
                        flat
                        class="filter-icon col-2"
                        @click="tagValues.splice(index, 1)"
                    />
                </div>
            </div>
            <QBtn
                icon="add_circle"
                shortcut="+"
                flat
                class="filter-icon q-mb-md"
                size="md"
                dense
                @click="tagValues.push({})"
            />
            <QBtn
                color="primary"
                icon="search"
                type="submit"
                :label="$t('globals.search')"
            />
        </QCard>
    </QForm>
</template>

<style scoped lang="scss">
.filter-icon {
    font-size: 24px;
    color: $primary;
    padding: 0 4px;
    cursor: pointer;
}
</style>

<i18n>
en:
    params:
        tag: Tag
es:
    params:
        tag: Etiqueta
</i18n>
