<template>
    <div class="settings-widget">
        <table>
            <tr v-for="setting in settings" :key="setting.id">
                <td>
                    <InputStringWidget v-if="setting.datatype == 'string'"
                        :labelTr="`settings.personal.label.${setting.name}`"
                        :tooltipTr="setting.immutable ? $t('settings.immutable.tooltip') : `settings.personal.tooltip.${setting.name}`" 
                        :value=setting.value
                        :disabled="setting.immutable && setting.value ? true : false"
                        :list="languagesList()" @input="handleInput(setting.id, $event)" />

                    <DateInputWidget v-else-if="setting.datatype == 'date'"
                        :labelTr="`settings.personal.label.${setting.name}`"
                        :tooltipTr="setting.immutable ? $t('settings.immutable.tooltip') : `settings.personal.tooltip.${setting.name}`" 
                        :value=setting.value
                        :disabled="setting.immutable && setting.value ? true : false"
                        @input="handleInput(setting.id, $event)" />

                    <SelectDropdownWidget v-else-if="setting.datatype == 'singleselect'"
                        :labelTr="`settings.personal.label.${setting.name}`"
                        :tooltipTr="setting.immutable ? $t('settings.immutable.tooltip') : `settings.personal.tooltip.${setting.name}`" 
                        :value=setting.value
                        :disabled="setting.immutable && setting.value ? true : false"
                        :list="getSettingOptions(setting.name, setting.options)"
                        @input="handleInput(setting.id, $event)" />

                    <InputNumberWidget v-else-if="setting.datatype == 'int'"
                        :labelTr="`settings.personal.label.${setting.name}`"
                        :tooltipTr="setting.immutable ? $t('settings.immutable.tooltip') : `settings.personal.tooltip.${setting.name}`" 
                        :value="convertToInt(setting.value)"
                        :disabled="setting.immutable && setting.value ? true : false"
                        min="0" max="200" @input="handleInput(setting.id, $event)" />

                    <FloatInputWidget v-else-if="setting.datatype == 'float'"
                        :labelTr="`settings.personal.label.${setting.name}`"
                        :tooltipTr="setting.immutable ? $t('settings.immutable.tooltip') : `settings.personal.tooltip.${setting.name}`" 
                        :value="convertToFloat(setting.value)"
                        :disabled="setting.immutable && setting.value ? true : false"
                        @input="handleInput(setting.id, $event)" />

                    <CheckboxWidget v-else-if="setting.datatype == 'bool'"
                        :labelTr="`settings.personal.label.${setting.name}`"
                        :tooltipTr="setting.immutable ? $t('settings.immutable.tooltip') : `settings.personal.tooltip.${setting.name}`" 
                        :value="convertToBool(setting.value)"
                        :disabled="setting.immutable && setting.value ? true : false"
                        @input="handleInput(setting.id, $event)" />

                    <MultiselectWidget v-else-if="setting.datatype == 'multiselect'"
                        :labelTr="`settings.personal.label.${setting.name}`"
                        :tooltipTr="setting.immutable ? $t('settings.immutable.tooltip') : `settings.personal.tooltip.${setting.name}`" 
                        :value="setting.value"
                        :disabled="setting.immutable && setting.value ? true : false"
                        :list="getSettingOptions(setting.name, setting.options)"
                        @input="handleInput(setting.id, $event)" />

                    <div v-else>{{ setting }}</div>
                    <span v-if="setting.unit">&nbsp;{{ setting.unit }}</span>
                </td>
                <td>
                    <select v-model="setting.visibility.id"
                        @change="handleVisibilityChange(setting.id, setting.visibility.id)">
                        <option v-for="visibility in possibleVisibilities" :key="visibility.id" :value="visibility.id">
                            {{ $t(`settings.visibility.${visibility.description}`) }}
                        </option>
                    </select>
                </td>
                <td v-if="setting.immutable && setting.value">
                    <button @click="openContactDialog" class="contact-button">
                        {{ $t('settings.immutable.supportContact') }}
                    </button>
                </td>
            </tr>
        </table>
    </div>
</template>

<script>
import apiClient from '@/utils/axios.js';
import { mapGetters } from 'vuex';
import InputStringWidget from '@/components/form/InputStringWidget.vue';
import DateInputWidget from '@/components/form/DateInputWidget.vue';
import SelectDropdownWidget from '@/components/form/SelectDropdownWidget.vue';
import InputNumberWidget from '@/components/form/InputNumberWidget.vue';
import FloatInputWidget from '@/components/form/FloatInputWidget.vue';
import CheckboxWidget from '@/components/form/CheckboxWidget.vue';
import MultiselectWidget from '@/components/form/MultiselectWidget.vue';

export default {
    name: "SettingsWidget",
    components: {
        InputStringWidget,
        DateInputWidget,
        SelectDropdownWidget,
        InputNumberWidget,
        FloatInputWidget,
        CheckboxWidget,
        MultiselectWidget
    },
    props: {
        settingsType: {
            type: String,
            required: true
        } 
    }, 
    data: {
        settings: [],
        possibleVisibilities: [],
    },
    computed: {
        ...mapGetters(['user']),
    }, 
    async mounted() {
        await this.fetchSettings();
        await this.fetchAccountData();
    }, 
    methods: {
        async fetchSettings() {
            if (this.user && this.user.id) {
                try {
                    const visibilityResponse = await apiClient.get('/api/settings/visibilities');
                    this.possibleVisibilities = visibilityResponse.data;
                    const userid = this.user.id;
                    const response = await apiClient.post('/api/settings/filter', {
                        userid: userid,
                        type: this.settingsType
                    });
                    this.settings = response.data;
                } catch (err) {
                    this.settings = [];
                }
            }
        },
        async fetchAccountData() {
            if (this.user && this.user.id) {
                try {
                    const response = await apiClient.post('/api/settings/account', { userId: this.user.id });
                    this.userEmail = response.data.email;
                    this.userUsername = response.data.username;
                } catch (err) {
                    console.error('Error fetching account data:', err);
                }
            }
        },
        getSettingOptions(fieldName, options) {
            return options.map((option) => {
                return {
                    value: option.id,
                    captionTr: `settings.personal.${fieldName}.${option.value}`
                }
            });
        },
        async handleInput(settingId, value) {
            if (['object', 'array'].includes(typeof value)) {
                return;
            }
            
            // Prüfe ob das Setting unveränderlich ist
            const setting = this.settings.find(s => s.id === settingId);
            if (setting && setting.immutable && setting.value) {
                alert(this.$t('settings.immutable.tooltip'));
                return;
            }
            
            try {
                const userid = this.user.id;
                await apiClient.post('/api/settings/update', {
                    userid: userid,
                    settingId: settingId,
                    value: value
                });
                this.fetchSettings();
            } catch (err) {
                console.error('Error updating setting:', err);
                if (err.response && err.response.data && err.response.data.error) {
                    alert(err.response.data.error);
                }
            }
        },
        languagesList() {
            return [
                { value: 'en', captionTr: 'settings.personal.languages.en' },
                { value: 'de', captionTr: 'settings.personal.languages.de' },
            ];
        },
        convertToInt(value) {
            const intValue = parseInt(value, 10);
            return isNaN(intValue) ? 0 : intValue;
        },
        convertToFloat(value) {
            const floatValue = parseFloat(value);
            return isNaN(floatValue) ? 0.0 : floatValue;
        },
        convertToBool(value) {
            if (value === 'true' || value === true) {
                return true;
            } else if (value === 'false' || value === false) {
                return false;
            } else {
                return false;
            }
        },
        async handleVisibilityChange(settingId, visibilityId) {
            try {
                await apiClient.post('/api/settings/update-visibility', {
                    userParamTypeId: settingId,
                    visibilityId: visibilityId
                });
            } catch (err) {
                console.error('Error updating visibility:', err);
            }
        },
        openContactDialog() {
            // Erstelle vorgefertigte Daten für Support-Anfrage
            const prefilledData = {
                email: this.userEmail || "",
                name: this.userUsername || "",
                message: this.createSupportMessage(),
                acceptDataSave: true
            };
            this.$root.$refs.contactDialog.open(prefilledData);
        },
        createSupportMessage() {
            // Erstelle eine vorgefertigte Nachricht für unveränderliche Felder
            const immutableFields = this.settings.filter(s => s.immutable && s.value);
            if (immutableFields.length === 0) {
                return this.$t('settings.immutable.supportMessage.general');
            }
            
            const fieldNames = immutableFields.map(field => 
                this.$t(`settings.personal.label.${field.name}`)
            ).join(', ');
            
            return this.$t('settings.immutable.supportMessage.specific', { fields: fieldNames });
        },
    },
    data() {
        return {
            settings: [],
            userEmail: "",
            userUsername: "",
        };
    }
};
</script>

<style lang="scss" scoped>
    label {
        float: left;
    }
    
    .contact-button {
        margin-left: 10px;
        padding: 5px 12px;
        cursor: pointer;
        background: #F9A22C;
        color: #000000;
        border: 1px solid #F9A22C;
        border-radius: 4px;
        transition: background 0.05s;
        border: 1px solid transparent;
        font-size: 12px;
    }
    
    .contact-button:hover {
        background: #fdf1db;
        color: #7E471B;
        border: 1px solid #7E471B;
    }
</style>