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

import { useQuasar } from 'quasar';

import { downloadFile } from 'src/composables/downloadFile';

import CustomerFileManagementDelete from 'src/pages/Customer/components/CustomerFileManagementDelete.vue';

const { t } = useI18n();
const quasar = useQuasar();
const route = useRoute();
const router = useRouter();

const $props = defineProps({
    id: {
        type: Number,
        required: true,
    },
    promise: {
        type: Function,
        required: true,
    },
});

const setDownloadFile = () => downloadFile($props.id);

const toCustomerFileManagementEdit = () => {
    router.push({
        name: 'CustomerFileManagementEdit',
        params: {
            id: route.params.id,
            dmsId: $props.id,
        },
    });
};

const showCustomerFileManagementDeleteDialog = () => {
    quasar.dialog({
        component: CustomerFileManagementDelete,
        componentProps: {
            id: $props.id,
            promise: setData,
        },
    });
};

const setData = () => {
    $props.promise();
};
</script>

<template>
    <div>
        <QIcon
            @click.stop="setDownloadFile"
            color="primary"
            name="cloud_download"
            size="sm"
        >
            <QTooltip>
                {{ t('actionFile', { action: t('globals.download') }) }}
            </QTooltip>
        </QIcon>
        <QIcon
            @click.stop="toCustomerFileManagementEdit"
            class="q-ml-md"
            color="primary"
            name="edit"
            size="sm"
        >
            <QTooltip>
                {{ t('actionFile', { action: t('globals.edit') }) }}
            </QTooltip>
        </QIcon>
        <QIcon
            @click.stop="showCustomerFileManagementDeleteDialog"
            class="q-ml-md"
            color="primary"
            name="delete"
            size="sm"
        >
            <QTooltip>
                {{ t('actionFile', { action: t('globals.remove') }) }}
            </QTooltip>
        </QIcon>
    </div>
</template>

<i18n>
en:
    actionFile: '{action} file'
es:
    actionFile: '{action} fichero'
</i18n>
