<script setup>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';

import CardList from 'src/components/ui/CardList.vue';
import VnImg from 'src/components/ui/VnImg.vue';
import VnSearchBar from 'src/components/ui/VnSearchBar.vue';

import { useAppStore } from 'stores/app';
import { storeToRefs } from 'pinia';

const { t } = useI18n();
const appStore = useAppStore();
const { isHeaderMounted } = storeToRefs(appStore);

const loading = ref(false);
const items = ref([]);

const query = `SELECT i.id, i.longName, i.size, i.category,
            i.value5, i.value6, i.value7,
            i.image, im.updated
            FROM vn.item i
            LEFT JOIN image im
            ON im.collectionFk = 'catalog'
            AND im.name = i.image
            WHERE i.longName LIKE CONCAT('%', #search, '%')
            OR i.id = #search
            ORDER BY i.longName LIMIT 50`;

const onSearch = data => (items.value = data || []);
</script>

<template>
    <Teleport v-if="isHeaderMounted" to="#actions">
        <VnSearchBar
            :sql-query="query"
            @on-search="onSearch"
            @on-search-error="items = []"
        />
    </Teleport>
    <QPage class="vn-w-xs">
        <QList class="flex justify-center">
            <span v-if="!loading && !items.length" class="flex items-center">
                <QIcon name="refresh" size="sm" class="q-mr-sm" />
                {{ t('introduceSearchTerm') }}
            </span>
            <QSpinner
                v-if="loading"
                color="primary"
                size="3em"
                :thickness="2"
            />
            <CardList
                v-else
                v-for="(item, index) in items"
                :key="index"
                :clickable="false"
            >
                <template #prepend>
                    <VnImg
                        storage="catalog"
                        size="200x200"
                        :id="item.id"
                        width="80px"
                        height="80px"
                        class="q-mr-md"
                        rounded
                        editable
                        edit-schema="catalog"
                        :edit-image-name="item.image"
                    />
                </template>
                <template #content>
                    <span class="text-bold q-mb-sm">
                        {{ item.longName }}
                    </span>
                    <span>
                        {{ item.value5 }} {{ item.value6 }}
                        {{ item.value7 }}
                    </span>
                    <span>{{ item.id }}</span>
                    <span>{{ item.image }}</span>
                </template>
            </CardList>
        </QList>
    </QPage>
</template>

<i18n lang="yaml">
en-US:
    introduceSearchTerm: Enter a search term
es-ES:
    introduceSearchTerm: Introduce un término de búsqueda
ca-ES:
    introduceSearchTerm: Introdueix un terme de cerca
fr-FR:
    introduceSearchTerm: Entrez un terme de recherche
pt-PT:
    introduceSearchTerm: Digite um termo de pesquisa
</i18n>
