<script setup>
import { computed, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { useQuasar } from 'quasar';

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 quasar = useQuasar();
const route = useRoute();
const router = useRouter();

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 = () => {
    console.log('entityId: ', entityId.value);
    quasar
        .dialog({
            title: 'Are you sure you want to delete it?',
            message: 'Delete department',
            ok: {
                push: true,
                color: 'primary',
            },
            cancel: true,
        })
        .onOk(async () => {
            try {
                await axios.post(
                    `/Departments/${entityId.value}/removeChild`,
                    entityId.value
                );
                router.push({ name: 'WorkerDepartment' });
                notify('department.departmentRemoved', 'positive');
            } catch (err) {
                console.log('Error removing department');
            }
        });
};
</script>
<template>
    <CardDescriptor
        module="Department"
        data-key="departmentData"
        :url="`Departments/${entityId}`"
        :title="data.title"
        :subtitle="data.subtitle"
        :summary="$props.summary"
        @on-fetch="
            (data) => {
                department = data;
                setData(data);
            }
        "
    >
        <template #menu="{}">
            <QItem v-ripple clickable @click="removeDepartment()">
                <QItemSection>{{ t('Delete') }}</QItemSection>
            </QItem>
        </template>
        <template #body="{ entity }">
            <VnLv :label="t('department.chat')" :value="entity.chatName" dash />
            <VnLv :label="t('department.email')" :value="entity.notificationEmail" dash />
            <VnLv
                :label="t('department.selfConsumptionCustomer')"
                :value="entity.client?.name"
                dash
            />
            <VnLv
                :label="t('department.bossDepartment')"
                :value="entity.worker?.user?.name"
                dash
            />
        </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>
