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

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

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

const appStore = useAppStore();
const { isHeaderMounted } = storeToRefs(appStore);
const loading = ref(false);
const items = ref([]);
const itemFilterProps = {
    include: [
        {
            relation: 'itemType',
            scope: {
                fields: ['id', 'name']
            }
        },
        {
            relation: 'intrastat',
            scope: {
                fields: ['id', 'description']
            }
        },
        {
            relation: 'origin',
            scope: {
                fields: ['id', 'name']
            }
        },
        {
            relation: 'production',
            scope: {
                fields: ['id', 'name']
            }
        }
    ],
    isActive: true,
    order: 'name ASC'
};

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

<template>
    <Teleport v-if="isHeaderMounted" to="#actions">
        <VnSearchBar
            url="Items/filter"
            @on-search="onSearch"
            @on-search-error="items = []"
            :filter="itemFilterProps"
        />
    </Teleport>
    <QPage class="vn-w-xs">
        <VnList
            class="flex justify-center"
            empty-message="introduceSearchTerm"
            empty-icon="refresh"
            :loading="loading"
            :rows="items"
            data-cy="itemsViewList"
        >
            <CardList
                v-for="(item, index) in items"
                :key="index"
                :clickable="false"
                data-cy="itemsViewCard"
            >
                <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.name }}
                    </span>
                    <span>
                        {{ item.value5 }} {{ item.value6 }}
                        {{ item.value7 }}
                    </span>
                    <span>{{ item.id }}</span>
                    <span>{{ item.image }}</span>
                </template>
            </CardList>
        </VnList>
    </QPage>
</template>
