<template>
    <div>
        <settings-form :settings="settings" :msg="msg" :form-values="formValues" :sources="sources">
            <template #bottom-form>
                <div class="row ie-row" v-if="exportTypes.length">
                    <div class="colonne25">
                        <label class="etiquette" for="exportType">{{ msg["exportType"] }}</label>
                    </div>
                    <div class="colonne75">
                        <select class="ie-select" id="exportType" v-model="formValues.exportType" :required="true">
                            <option value="" disabled>{{ messages.get('common', 'common_default_select') }}</option>
                            <option v-for="(type, index) in exportTypes" :value="type.namespace" :key="index">
                                {{ type.messages[type.type] }}</option>
                        </select>
                    </div>
                    <div v-if="currentExportType">
                        <component v-if="exportTypeComponent" :is="exportTypeComponent"
                            :settings="currentExportType.settings" :msg="currentExportType.messages"
                            :form-values="formValues[formValues.exportType]"></component>
                        <settings-form v-else :settings="currentExportType.settings" :msg="currentExportType.messages"
                            :form-values="formValues[formValues.exportType]"></settings-form>
                    </div>
                </div>
            </template>
        </settings-form>
    </div>
</template>

<script>
import settingsForm from '@importexport/common/settingsForm.vue';

export default {
    components: {
        settingsForm
    },
    props: {
        settings: {
            'type': Array
        },
        formValues: {
            'type': Object
        },
        msg: {
            'type': Object
        },
        sources: {
            'type': Array
        }
    },
    data: function () {
        return {
            exportTypes: []
        }
    },
    created: async function () {
        let response = await this.ws.post('Steps', 'callback/getExportTypes');
        if (!response.error) {
            this.exportTypes = response;
        }
    },
    watch: {
        "formValues.exportType": async function () {
            this.$set(this.formValues, this.formValues.exportType, {});
        }
    },
    computed: {
        currentExportType: function () {
            if (this.formValues.exportType) {
                let type = this.exportTypes.find(type => type.namespace == this.formValues.exportType);
                if (type) {
                    return type;
                }
            }
            return null;
        },
        exportTypeComponent: function () {
            if (this.currentExportType && this.currentExportType.type) {
                try {
                    require('./components/' + this.currentExportType.type + '/form.vue');
                    return () => import('./components/' + this.currentExportType.type + '/form.vue');
                } catch (e) {
                    console.info(e)
                }
            }
            return null;
        }
    }
}
</script>