<template>
    <div>
        <h2>{{ $t("admin.interests.title") }}</h2>
        <table>
            <thead>
                <tr>
                    <th>{{ $t("admin.interests.newinterests.name") }}</th>
                    <th>{{ $t("admin.interests.newinterests.status") }}</th>
                    <th>{{ $t("admin.interests.newinterests.adultonly") }}</th>
                    <th>{{ $t("admin.interests.newinterests.translations") }}</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="openInterest in openInterests" :key="openInterest.id">
                    <td>{{ openInterest.name }}</td>
                    <td>
                        <label>
                            <input type="checkbox" v-model="openInterest.allowed" @change="changeItem(openInterest)" />
                            {{ $t("admin.interests.newinterests.isactive") }}
                        </label>
                    </td>
                    <td>
                        <label>
                            <input type="checkbox" v-model="openInterest.adultOnly"
                                @change="changeItem(openInterest)" />
                            {{ $t("admin.interests.newinterests.isadult") }}
                        </label>
                    </td>
                    <td>
                        <div v-for="language in languages" :key="language.id">
                            <label>{{ $t(language.captionTr) }}
                                <input type="text" :value="getTranslationValue(openInterest, language)"
                                    @change="changeTranslation(openInterest, language, $event.target.value)" />
                            </label>
                        </div>
                    </td>
                    <td>
                        <button @click="deleteInterest(openInterest.id)">{{ $t("admin.interests.newinterests.delete")
                            }}</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
import apiClient from '@/utils/axios.js';
import { mapGetters } from 'vuex';
import MessageboxWidget from '../../components/MessageboxWidget.vue';

export default {
    name: "AdminInterestsView",
    data() {
        return {
            openInterests: [],
            languages: [],
        }
    },
    components: {
        MessageboxWidget,
    },
    computed: {
        ...mapGetters(['user', 'language']),
    },
    async mounted() {
        await this.loadOpenInterests();
        await this.getLanguages();
    },
    methods: {
        async loadOpenInterests() {
            try {
                const response = await apiClient.get('/api/admin/interests/open');
                this.openInterests = response.data;
            } catch (error) {
                console.error(error);
            }
        },
        async changeItem(interest) {
            try {
                const payload = {
                    id: interest.id,
                    active: interest.allowed || false,
                    adult: interest.adultOnly || false,
                };
                await apiClient.post('/api/admin/interest', payload);
            } catch (error) {
                console.error(error);
            }
        },
        async changeTranslation(interest, language, value) {
            try {
                if (!interest.translations) {
                    interest.translations = {}; // Direkte Zuweisung, um Reaktivität sicherzustellen
                }
                interest.translations[language.value] = value; // Direkte Zuweisung

                const payload = {
                    id: interest.id,
                    translations: {
                        [language.value]: value,
                    }
                };
                await apiClient.post('/api/admin/interest/translation', payload);
            } catch (error) {
                console.error(error);
            }
        },
        async deleteInterest(id) {
            try {
                await apiClient.delete(`/api/admin/interest/${id}`);
                this.openInterests = this.openInterests.filter(interest => interest.id !== id);
            } catch (error) {
                console.error(error);
            }
        },
        async getLanguages() {
            try {
                const response = await apiClient.post('/api/settings/getparamvalues', {
                    type: 'language'
                });
                this.languages = response.data.map(item => { return { value: item.id, captionTr: `settings.personal.language.${item.name}` } });
            } catch (err) {
                console.error('Error loading languages:', err);
            }
        },
        getTranslationValue(interest, language) {
            return interest.translations ? interest.translations[language.value] || '' : '';
        },
    }
}
</script>
