<template>
    <DialogWidget ref="dialog" :title="translatedTitle" :show-close="true" :buttons="translatedButtons" :modal="true" width="25em"
        height="15em" name="MessageDialog" :isTitleTranslated=false>
        <div class="message-content">
            <p>{{ translatedMessage }}</p>
        </div>
    </DialogWidget>
</template>

<script>
import DialogWidget from '@/components/DialogWidget.vue';

export default {
    name: 'MessageDialog',
    components: {
        DialogWidget,
    },
    data() {
        return {
            message: '',
            title: '',
            parameters: {},
            onClose: null,
            buttons: [
                { text: 'tr:message.close', action: 'close' }
            ]
        };
    },
    computed: {
        translatedTitle() {
            if (this.title.startsWith('tr:')) {
                return this.$t(this.title.substring(3));
            }
            if (this.title) {
                return this.title;
            }
            // Standard-Titel je nach Sprache
            return this.$t('message.title');
        },
        translatedMessage() {
            if (this.message.startsWith('tr:')) {
                const i18nKey = this.message.substring(3);
                const translation = this.$t(i18nKey);
                console.log('translatedMessage:', {
                    i18nKey: i18nKey,
                    translation: translation,
                    parameters: this.parameters,
                    allMinigames: this.$t('minigames'),
                    crashSection: this.$t('minigames.taxi.crash')
                });
                // Ersetze Parameter in der Übersetzung
                return this.interpolateParameters(translation);
            }
            return this.message;
        },
        translatedButtons() {
            return this.buttons.map(button => ({
                ...button,
                text: button.text.startsWith('tr:') ? this.$t(button.text.substring(3)) : button.text
            }));
        }
    },
    methods: {
        open(message, title = '', parameters = {}, onClose = null) {
            this.message = message;
            this.title = title;
            this.parameters = parameters;
            this.onClose = onClose;
            this.$refs.dialog.open();
            // Event Listener für Enter-Taste hinzufügen
            this.$nextTick(() => {
                document.addEventListener('keydown', this.handleKeyDown);
            });
        },
        close() {
            this.$refs.dialog.close();
            // Event Listener entfernen
            document.removeEventListener('keydown', this.handleKeyDown);
            // Rufe Callback auf, wenn vorhanden
            if (this.onClose && typeof this.onClose === 'function') {
                this.onClose();
            }
        },
        handleKeyDown(event) {
            // Schließe Dialog bei Enter-Taste
            if (event.key === 'Enter' || event.keyCode === 13) {
                event.preventDefault();
                this.close();
            }
        },
        interpolateParameters(text) {
            // Ersetze {key} Platzhalter mit den entsprechenden Werten
            let result = text;
            console.log('interpolateParameters:', {
                originalText: text,
                parameters: this.parameters
            });
            
            for (const [key, value] of Object.entries(this.parameters)) {
                const placeholder = `{${key}}`;
                const regex = new RegExp(placeholder.replace(/[{}]/g, '\\$&'), 'g');
                result = result.replace(regex, value);
                console.log(`Replaced ${placeholder} with ${value}:`, result);
            }
            
            console.log('Final result:', result);
            return result;
        }
    },
    beforeDestroy() {
        // Stelle sicher, dass Event Listener entfernt wird
        document.removeEventListener('keydown', this.handleKeyDown);
    }
};
</script>

<style scoped>
.message-content {
    padding: 1em;
    color: #000000;
    text-align: center;
}
</style>
