/**
 * ImportSetup Component
 * Handles the setup of import configurations
 */
Vue.component('import-setup', {
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        targetServers: {
            type: Array,
            default: () => []
        },
        contentTypes: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            mapping: {
                name: '',
                description: '',
                targetServer: '',
                targetSite: '',
                targetModule: '',
                targetType: '',
                source: ''
            },
            currentStep: 1,
            totalSteps: 3
        };
    },
    methods: {
        CloseModal() {
            this.$emit("CloseModal");
        },
        NextStep() {
            if (this.currentStep < this.totalSteps) {
                this.currentStep++;
            }
        },
        PreviousStep() {
            if (this.currentStep > 1) {
                this.currentStep--;
            }
        },
        async SaveMapping() {
            try {
                await fetch("/api/ContentTree/SaveMapping", {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(this.mapping)
                });
                this.$emit('mapping-saved');
                this.CloseModal();
                Helpers.showNotification('Mapping saved successfully', 'success');
            } catch (error) {
                console.error('Error saving mapping:', error);
                Helpers.showNotification('Error saving mapping', 'error');
            }
        }
    },
    template: `
        <div class="modal fade" id="import-setup" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Import Setup</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close" @click="CloseModal">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div v-if="currentStep === 1">
                            <h4>Step 1: Basic Information</h4>
                            <div class="form-group">
                                <label for="mappingName">Mapping Name</label>
                                <input v-model="mapping.name" type="text" class="form-control" id="mappingName" required>
                            </div>
                            <div class="form-group">
                                <label for="mappingDescription">Description</label>
                                <textarea v-model="mapping.description" class="form-control" id="mappingDescription" rows="3"></textarea>
                            </div>
                        </div>

                        <div v-if="currentStep === 2">
                            <h4>Step 2: Target Configuration</h4>
                            <div class="form-group">
                                <label for="targetServer">Target Server</label>
                                <select v-model="mapping.targetServer" class="form-control" id="targetServer" required>
                                    <option value="">Select a server</option>
                                    <option v-for="server in targetServers" :value="server.id">{{server.name}}</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="targetSite">Target Site</label>
                                <input v-model="mapping.targetSite" type="text" class="form-control" id="targetSite" required>
                            </div>
                            <div class="form-group">
                                <label for="targetModule">Target Module</label>
                                <input v-model="mapping.targetModule" type="text" class="form-control" id="targetModule" required>
                            </div>
                        </div>

                        <div v-if="currentStep === 3">
                            <h4>Step 3: Content Type Selection</h4>
                            <div class="form-group">
                                <label for="targetType">Target Content Type</label>
                                <select v-model="mapping.targetType" class="form-control" id="targetType" required>
                                    <option value="">Select a content type</option>
                                    <option v-for="type in contentTypes" :value="type.id">{{type.name}}</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="source">Source</label>
                                <input v-model="mapping.source" type="text" class="form-control" id="source" required>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" @click="PreviousStep" v-if="currentStep > 1">Previous</button>
                        <button type="button" class="btn btn-primary" @click="NextStep" v-if="currentStep < totalSteps">Next</button>
                        <button type="button" class="btn btn-success" @click="SaveMapping" v-if="currentStep === totalSteps">Save</button>
                        <button type="button" class="btn btn-secondary" @click="CloseModal">Cancel</button>
                    </div>
                </div>
            </div>
        </div>
    `,
    watch: {
        visible: {
            immediate: true,
            handler(newVal) {
                if (newVal) {
                    $('#import-setup').modal('show');
                } else {
                    $('#import-setup').modal('hide');
                }
            }
        }
    }
}); 