<script setup>
import VnConfirm from '../ui/VnConfirm.vue';
import VnInput from './VnInput.vue';
import VnDms from './VnDms.vue';
import axios from 'axios';
import { useQuasar } from 'quasar';
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { downloadFile } from 'src/composables/downloadFile';

const { t } = useI18n();
const quasar = useQuasar();
const documentDialogRef = ref({});
const editDownloadDisabled = ref(false);
const $props = defineProps({
    defaultDmsCode: {
        type: String,
        default: 'invoiceIn',
    },
    disable: {
        type: Boolean,
        default: true,
    },
    data: {
        type: Object,
        default: null,
    },
    formRef: {
        type: Object,
        default: null,
    },
});

function deleteFile(dmsFk) {
    quasar
        .dialog({
            component: VnConfirm,
            componentProps: {
                title: t('globals.confirmDeletion'),
                message: t('globals.confirmDeletionMessage'),
            },
        })
        .onOk(async () => {
            await axios.post(`dms/${dmsFk}/removeFile`);
            $props.formRef.formData.dmsFk = null;
            $props.formRef.formData.dms = undefined;
            $props.formRef.hasChanges = true;
            $props.formRef.save();
        });
}
</script>
<template>
    <div class="row no-wrap">
        <VnInput
            :label="t('Document')"
            v-model="data.dmsFk"
            clearable
            clear-icon="close"
            class="full-width"
            :disable="disable"
        />
        <div
            v-if="data.dmsFk"
            class="row no-wrap q-pa-xs q-gutter-x-xs"
            data-cy="dms-buttons"
        >
            <QBtn
                :disable="editDownloadDisabled"
                @click="downloadFile(data.dmsFk)"
                icon="cloud_download"
                color="primary"
                flat
                :class="{
                    'no-pointer-events': editDownloadDisabled,
                }"
                padding="xs"
                round
            >
                <QTooltip>{{ t('Download file') }}</QTooltip>
            </QBtn>
            <QBtn
                :disable="editDownloadDisabled"
                @click="
                    () => {
                        documentDialogRef.show = true;
                        documentDialogRef.dms = data.dms;
                    }
                "
                icon="edit"
                color="primary"
                flat
                :class="{
                    'no-pointer-events': editDownloadDisabled,
                }"
                padding="xs"
                round
            >
                <QTooltip>{{ t('Edit document') }}</QTooltip>
            </QBtn>
            <QBtn
                :disable="editDownloadDisabled"
                @click="deleteFile(data.dmsFk)"
                icon="delete"
                color="primary"
                flat
                round
                :class="{
                    'no-pointer-events': editDownloadDisabled,
                }"
                padding="xs"
            >
                <QTooltip>{{ t('Delete file') }}</QTooltip>
            </QBtn>
        </div>
        <QBtn
            v-else
            icon="add_circle"
            color="primary"
            flat
            round
            v-shortcut="'+'"
            padding="xs"
            @click="
                () => {
                    documentDialogRef.show = true;
                    delete documentDialogRef.dms;
                }
            "
            data-cy="dms-create"
        >
            <QTooltip>{{ t('Create document') }}</QTooltip>
        </QBtn>
    </div>
    <QDialog v-model="documentDialogRef.show">
        <VnDms
            model="dms"
            :default-dms-code="defaultDmsCode"
            :form-initial-data="documentDialogRef.dms"
            :url="
                documentDialogRef.dms
                    ? `Dms/${documentDialogRef.dms.id}/updateFile`
                    : 'Dms/uploadFile'
            "
            :description="documentDialogRef.supplierName"
            @on-data-saved="
                (_, { data }) => {
                    let dmsData = data;
                    if (Array.isArray(data)) dmsData = data[0];
                    formRef.formData.dmsFk = dmsData.id;
                    formRef.formData.dms = dmsData;
                    formRef.hasChanges = true;
                    formRef.save();
                }
            "
        />
    </QDialog>
</template>
<i18n>
es:
    Document: Documento
    Download file: Descargar archivo
    Edit document: Editar documento
    Delete file: Eliminar archivo
    Create document: Crear documento

</i18n>
