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

import FetchData from 'components/FetchData.vue';
import FormModel from 'components/FormModel.vue';
import VnRow from 'components/ui/VnRow.vue';
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
import VnInput from 'src/components/common/VnInput.vue';

const route = useRoute();
const { t } = useI18n();

const props = defineProps({
    model: {
        type: String,
        required: true,
    },
});

const warehouses = ref();
const companies = ref();
const dmsTypes = ref();
const allowedContentTypes = ref();
const dms = ref({});

function onFileChange(files) {
    dms.value.hasFileAttached = !!files;
    dms.value.file = files?.name;
}

function parseDms(data) {
    const defaultDms = {};

    for (let prop in data) {
        if (prop.endsWith('Fk')) data[prop.replace('Fk', 'Id')] = data[prop];
    }
    console.log(data);
    dms.value = data;
}
</script>
<template>
    <FetchData url="Warehouses" @on-fetch="(data) => (warehouses = data)" auto-load />
    <FetchData url="Companies" @on-fetch="(data) => (companies = data)" auto-load />
    <FetchData url="DmsTypes" @on-fetch="(data) => (dmsTypes = data)" auto-load />
    <FetchData
        url="DmsContainers/allowedContentTypes"
        @on-fetch="(data) => (allowedContentTypes = data.join(','))"
        auto-load
    />
    <FormModel
        :url="`Dms/${route.params.id}`"
        update-type="post"
        :url-update="`${props.model}/${route.params.id}/uploadFile`"
        @on-fetch="parseDms"
        model="dms"
        :auto-load="!!route.params.id"
    >
        <template #form>
            <div class="q-gutter-y-ms">
                <VnRow>
                    <VnInput :label="t('Reference')" v-model="dms.reference" />
                    <VnSelectFilter
                        :label="t('globals.company')"
                        v-model="dms.companyFk"
                        :options="companies"
                        option-value="id"
                        option-label="code"
                        input-debounce="0"
                    />
                </VnRow>
                <VnRow>
                    <VnSelectFilter
                        :label="t('globals.warehouse')"
                        v-model="dms.warehouseFk"
                        :options="warehouses"
                        option-value="id"
                        option-label="name"
                        input-debounce="0"
                    />
                    <VnSelectFilter
                        :label="t('globals.type')"
                        v-model="dms.dmsTypeFk"
                        :options="dmsTypes"
                        option-value="id"
                        option-label="name"
                        input-debounce="0"
                    />
                </VnRow>
                <QInput
                    :label="t('globals.description')"
                    v-model="dms.description"
                    type="textarea"
                />
                <QFile
                    :label="t('entry.buys.file')"
                    v-model="dms.files"
                    :multiple="false"
                    accept=".json"
                    @update:model-value="onFileChange(dms.files)"
                    class="required"
                    :display-value="dms.file"
                >
                    <template #prepend>
                        <QIcon name="vn:attach" class="cursor-pointer">
                            <QTooltip>{{ t('Select a file') }}</QTooltip>
                        </QIcon>
                    </template>
                    <template #append>
                        <QIcon name="info" class="cursor-pointer">
                            <QTooltip>{{
                                t('contentTypesInfo', { allowedContentTypes })
                            }}</QTooltip>
                        </QIcon>
                    </template>
                </QFile>
                <QCheckbox
                    v-model="dms.hasFile"
                    :label="t('Generate identifier for original file')"
                />
            </div>
        </template>
    </FormModel>
</template>
<style scoped>
.q-gutter-y-ms {
    display: grid;
    row-gap: 20px;
}
</style>
<i18n>
en:
    contentTypesInfo: Allowed file types {allowedContentTypes}
es:
    contentTypesInfo: Tipos de archivo permitidos {allowedContentTypes}
    Generate identifier for original file: Generar identificador para archivo original
</i18n>
