<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 CardDescriptor from 'src/components/ui/CardDescriptor.vue';
import useCardDescription from 'src/composables/useCardDescription';

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 department = ref();

const data = ref(useCardDescription());

const setData = (entity) => {
    if (!entity) return;
    data.value = useCardDescription(entity.name, entity.id);
};

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

const { openConfirmationModal } = useVnConfirm();
</script>
<template>
    <CardDescriptor
        ref="DepartmentDescriptorRef"
        module="Department"
        :url="`Departments/${entityId}`"
        :title="data.title"
        :subtitle="data.subtitle"
        :summary="$props.summary"
        :to-module="{ name: 'WorkerDepartment' }"
        @on-fetch="
            (data) => {
                department = data;
                setData(data);
            }
        "
        data-key="department"
    >
        <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('department.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: {
                            params: JSON.stringify({ departmentFk: entityId }),
                        },
                    }"
                >
                    <QTooltip>{{ t('Department workers') }}</QTooltip>
                </QBtn>
            </QCardActions>
        </template>
    </CardDescriptor>
</template>

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