<script setup>
import { computed, onMounted, onUnmounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { useStateStore } from 'stores/useStateStore';
import CardSummary from 'components/ui/CardSummary.vue';
import VnLv from 'components/ui/VnLv.vue';
import ShelvingFilter from 'pages/Shelving/Card/ShelvingFilter.vue';
import VnUserLink from 'components/ui/VnUserLink.vue';

const $props = defineProps({
    id: {
        type: Number,
        default: 0,
    },
});
const route = useRoute();
const stateStore = useStateStore();
const router = useRouter();
const { t } = useI18n();

const entityId = computed(() => $props.id || route.params.id);
const isDialog = Boolean($props.id);
const hideRightDrawer = () => {
    if (!isDialog) {
        stateStore.rightDrawer = false;
    }
};
onMounted(hideRightDrawer);
onUnmounted(hideRightDrawer);
const filter = {
    include: [
        {
            relation: 'worker',
            scope: {
                fields: ['id'],
                include: {
                    relation: 'user',
                    scope: { fields: ['nickname'] },
                },
            },
        },
        { relation: 'parking' },
    ],
};
</script>

<template>
    <template v-if="!isDialog && stateStore.isHeaderMounted()">
        <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>
    <div class="q-pa-md">
        <CardSummary ref="summary" :url="`Shelvings/${entityId}`" :filter="filter">
            <template #header="{ entity }">
                <div>{{ entity.code }}</div>
            </template>
            <template #body="{ entity }">
                <QCard class="vn-one">
                    <RouterLink
                        class="header header-link"
                        :to="{ name: 'ShelvingBasicData', params: { id: entityId } }"
                    >
                        {{ t('shelving.pageTitles.basicData') }}
                        <QIcon name="open_in_new" />
                    </RouterLink>
                    <VnLv :label="t('shelving.summary.code')" :value="entity.code" />
                    <VnLv
                        :label="t('shelving.summary.parking')"
                        :value="entity.parking?.code"
                    />
                    <VnLv
                        :label="t('shelving.summary.priority')"
                        :value="entity.priority"
                    />
                    <VnLv v-if="entity.worker" :label="t('shelving.summary.worker')">
                        <template #value>
                            <VnUserLink
                                :name="entity.worker?.user?.nickname"
                                :worker-id="entity.worker?.id"
                            />
                        </template>
                    </VnLv>
                    <VnLv
                        :label="t('shelving.summary.recyclable')"
                        :value="entity.isRecyclable"
                    />
                </QCard>
            </template>
        </CardSummary>
    </div>
    <QDrawer
        v-if="!isDialog"
        v-model="stateStore.rightDrawer"
        side="right"
        :width="256"
        show-if-above
    >
        <QScrollArea class="fit text-grey-8">
            <ShelvingFilter
                data-key="ShelvingList"
                @search="router.push({ name: 'ShelvingList' })"
            />
        </QScrollArea>
    </QDrawer>
</template>
