<template>
    <h3 class="text-center">Message Templates</h3>
    <ul>
        <li v-for="template in messageTemplates" :key="template.id">
            <pre>{{ template.message }}</pre>
            <FormatedText :value="template.message" :format="formatText"/>
        </li>
    </ul>
    <h3 class="text-center">Message Template Variables</h3>
    <ul>
        <li v-for="(variable, key) in messageTemplateVariables" :key="key">
            {{ variable }}
        </li>
    </ul>
</template>

<script>
import {mapActions, mapState} from 'vuex';
import Table from '@/components/Table';
import FormatedText from "@/components/inputs/FormatedText.vue";

export default {
    name: 'Settings',
    components: {FormatedText, Table},
    computed: mapState(['messageTemplates', 'messageTemplateVariables']),
    methods: {
        ...mapActions(['fetchMessageTemplates', 'fetchMessageTemplateVariables']),
        formatText(value) {
            return value.replace(/{{(.*?)}}/g, (match, key) => {
                return `<span class="text-primary">{{ ${key} }}</span>`;
            }).replace(/\n/g, '<br>').replace(/\t/g, '&nbsp;&nbsp;&nbsp;&nbsp;');
        }
    },
    mounted() {
        this.fetchMessageTemplates();
        this.fetchMessageTemplateVariables();
    },
};
</script>

<style scoped>
pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    color: inherit;
}
</style>