<script setup>
import { computed, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { useVnConfirm } from 'composables/useVnConfirm';
import VnLv from 'src/components/ui/VnLv.vue';
import EntityDescriptor from 'src/components/ui/EntityDescriptor.vue';

import axios from 'axios';
import useNotify from 'src/composables/useNotify.js';

const $props = defineProps({
    id: {
        type: Number,
        required: false,
        default: null,
    },
    summary: {
        type: Object,
        default: null,
    },
});

const route = useRoute();
const router = useRouter();
const DepartmentDescriptorRef = ref();
const { t } = useI18n();
const { notify } = useNotify();

const entityId = computed(() => {
    return $props.id || route.params.id;
});

const removeDepartment = async () => {
    await axios.post(`/Departments/${entityId.value}/removeChild`, entityId.value);
    router.push({ name: 'WorkerDepartment' });
    notify('department.departmentRemoved', 'positive');
};

const { openConfirmationModal } = useVnConfirm();
</script>
<template>
    <EntityDescriptor
        ref="DepartmentDescriptorRef"
        :url="`Departments/${entityId}`"
        :summary="$props.summary"
        :to-module="{ name: 'WorkerDepartment' }"
        data-key="Department"
        :filter="{
            include: [
                {
                    relation: 'client',
                    scope: {
                        fields: ['id', 'name'],
                    },
                },
                {
                    relation: 'worker',
                    scope: {
                        fields: ['id', 'name'],
                        include: {
                            relation: 'user',
                            scope: {
                                fields: ['id', 'name'],
                            },
                        },
                    },
                },
            ],
        }"
    >
        <template #menu="{}">
            <QItem
                v-ripple
                clickable
                @click="
                    openConfirmationModal(
                        t('Are you sure you want to delete it?'),
                        t('Delete department'),
                        removeDepartment,
                    )
                "
            >
                <QItemSection>{{ t('Delete') }}</QItemSection>
            </QItem>
        </template>
        <template #body="{ entity }">
            <VnLv :label="t('department.chat')" :value="entity.chatName" />
            <VnLv
                :label="t('globals.params.email')"
                :value="entity.notificationEmail"
                copy
            />
            <VnLv
                :label="t('department.selfConsumptionCustomer')"
                :value="entity.client?.name"
            />
            <VnLv
                :label="t('department.bossDepartment')"
                :value="entity.worker?.user?.name"
            />
        </template>
        <template #actions>
            <QCardActions>
                <QBtn
                    size="md"
                    icon="vn:worker"
                    color="primary"
                    :to="{
                        name: 'WorkerList',
                        query: {
                            table: JSON.stringify({ departmentFk: entityId }),
                        },
                    }"
                >
                    <QTooltip>{{ t('Department workers') }}</QTooltip>
                </QBtn>
            </QCardActions>
        </template>
    </EntityDescriptor>
</template>

<i18n>
    es:
        Department workers: Trabajadores del departamento
</i18n>
