<script setup>
import VnPaginate from 'components/ui/VnPaginate.vue';
import { useStateStore } from 'stores/useStateStore';
import { useI18n } from 'vue-i18n';
import { onMounted, onUnmounted } from 'vue';
import CardList2 from 'components/ui/CardList2.vue';
import VnLv from 'components/ui/VnLv.vue';
import { useQuasar } from 'quasar';
import { useRouter } from 'vue-router';
import ShelvingFilter from 'pages/Shelving/components/ShelvingFilter.vue';
import ShelvingSummaryDialog from 'pages/Shelving/Summary/ShelvingSummaryDialog.vue';
import ShelvingSearchbar from 'pages/Shelving/components/ShelvingSearchbar.vue';

const stateStore = useStateStore();
const router = useRouter();
const quasar = useQuasar();
const { t } = useI18n();
const filter = {
    include: [{ relation: 'parking' }],
};

onMounted(() => (stateStore.rightDrawer = true));
onUnmounted(() => (stateStore.rightDrawer = false));

function navigate(id) {
    router.push({ path: `/shelving/${id}` });
}

function viewSummary(id) {
    quasar.dialog({
        component: ShelvingSummaryDialog,
        componentProps: {
            id,
        },
    });
}
</script>

<template>
    <template v-if="stateStore.isHeaderMounted()">
        <Teleport to="#searchbar">
            <ShelvingSearchbar />
        </Teleport>
        <Teleport to="#actions-append">
            <div class="row q-gutter-x-sm">
                <QBtn
                    flat
                    @click="stateStore.toggleRightDrawer()"
                    round
                    dense
                    icon="menu"
                >
                    <QTooltip bottom anchor="bottom right">
                        {{ t('globals.collapseMenu') }}
                    </QTooltip>
                </QBtn>
            </div>
        </Teleport>
    </template>
    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
        <QScrollArea class="fit text-grey-8">
            <ShelvingFilter data-key="ShelvingList" />
        </QScrollArea>
    </QDrawer>
    <QPage class="column items-center q-pa-md">
        <div class="card-list">
            <VnPaginate
                data-key="ShelvingList"
                url="Shelvings"
                :filter="filter"
                auto-load
            >
                <template #body="{ rows }">
                    <CardList2
                        v-for="row of rows"
                        :key="row.id"
                        :showCheckbox="true"
                        :title="row.code"
                        @click="navigate(row.id)"
                    >
                        <template #list-items>
                            <VnLv label="ID" :value="row.id" />
                            <VnLv
                                :label="t('shelving.list.parking')"
                                :title-label="t('shelving.list.parking')"
                                :value="row.parking?.code"
                            />
                            <VnLv
                                :label="t('shelving.list.priority')"
                                :value="row?.priority"
                            />
                        </template>
                        <template #actions>
                            <QBtn
                                :label="t('components.smartCard.openCard')"
                                @click.stop="navigate(row.id)"
                                color="primary"
                                type="submit"
                            />
                            <QBtn
                                :label="t('components.smartCard.openSummary')"
                                @click.stop="viewSummary(row.id)"
                                color="primary"
                                flat
                                style="margin-top: 15px"
                                type="reset"
                            />
                        </template>
                    </CardList2>
                </template>
            </VnPaginate>
        </div>
        <QPageSticky :offset="[20, 20]">
            <RouterLink :to="{name: 'ShelvingCreate'}">
                <QBtn fab icon="add" color="primary" />
                <QTooltip>
                    {{ t('supplier.list.newSupplier') }}
                </QTooltip>
            </RouterLink>
        </QPageSticky>
    </QPage>
</template>

<style lang="scss" scoped>
.card-list {
    width: 100%;
    max-width: 60em;
}
</style>
