<template>
    <form class="form vue-form" @submit.prevent="submit">
        <slot name="preCard"></slot>

        <b-card no-body>
            <div class="card-header bg-primary-dark">
                <h2 class="card-title">
                    <slot name="cardTitle">
                        <translate key="lang_settings">System Settings</translate>
                    </slot>
                </h2>
            </div>

            <slot name="cardUpper"></slot>

            <b-alert variant="danger" :show="error != null">{{ error }}</b-alert>

            <b-overlay variant="card" :show="loading">
                <b-tabs card lazy justified>
                    <settings-general-tab :form="$v.form"
                                          :tab-class="getTabClass($v.generalTab)"></settings-general-tab>
                    <settings-security-privacy-tab :form="$v.form"
                                                   :tab-class="getTabClass($v.securityPrivacyTab)"></settings-security-privacy-tab>
                    <settings-services-tab :form="$v.form" :tab-class="getTabClass($v.servicesTab)"
                                           :release-channel="releaseChannel"></settings-services-tab>
                </b-tabs>
            </b-overlay>

            <b-card-body body-class="card-padding-sm">
                <b-button size="lg" type="submit" :variant="($v.form.$invalid) ? 'danger' : 'primary'">
                    <slot name="submitButtonName">
                        <translate key="lang_btn_save_changes">Save Changes</translate>
                    </slot>
                </b-button>
            </b-card-body>
        </b-card>
    </form>
</template>

<script>
import SettingsGeneralTab from "./Settings/GeneralTab";
import SettingsServicesTab from "./Settings/ServicesTab";
import {validationMixin} from "vuelidate";
import {required} from 'vuelidate/dist/validators.min.js';
import SettingsSecurityPrivacyTab from "~/components/Admin/Settings/SecurityPrivacyTab";

export default {
    name: 'AdminSettings',
    components: {SettingsSecurityPrivacyTab, SettingsServicesTab, SettingsGeneralTab},
    emits: ['saved'],
    props: {
        apiUrl: String,
        releaseChannel: {
            type: String,
            default: 'rolling',
            required: false
        }
    },
    mixins: [
        validationMixin
    ],
    data() {
        return {
            loading: true,
            error: null,
            form: {},
        };
    },
    validations: {
        form: {
            base_url: {required},
            instance_name: {},
            prefer_browser_url: {},
            use_radio_proxy: {},
            history_keep_days: {required},
            enable_websockets: {},
            enable_advanced_features: {},

            analytics: {required},

            always_use_ssl: {},
            api_access_control: {},

            check_for_updates: {},
            mail_enabled: {},
            mail_sender_name: {},
            mail_sender_email: {},
            mail_smtp_host: {},
            mail_smtp_port: {},
            mail_smtp_secure: {},
            mail_smtp_username: {},
            mail_smtp_password: {},
            avatar_service: {},
            avatar_default_url: {},
            use_external_album_art_in_apis: {},
            use_external_album_art_when_processing_media: {},
            last_fm_api_key: {}
        },
        generalTab: [
            'form.base_url', 'form.instance_name', 'form.prefer_browser_url', 'form.use_radio_proxy',
            'form.history_keep_days', 'form.enable_websockets', 'form.enable_advanced_features'
        ],
        securityPrivacyTab: [
            'form.analytics', 'form.always_use_ssl', 'form.api_access_control'
        ],
        servicesTab: [
            'form.check_for_updates', 'form.mail_enabled', 'form.mail_sender_name', 'form.mail_sender_email',
            'form.mail_smtp_host', 'form.mail_smtp_port', 'form.mail_smtp_secure', 'form.mail_smtp_username',
            'form.mail_smtp_password', 'form.avatar_service', 'form.avatar_default_url',
            'form.use_external_album_art_in_apis', 'form.use_external_album_art_when_processing_media',
            'form.last_fm_api_key',
        ]
    },
    mounted() {
        this.relist();
    },
    methods: {
        getTabClass(validationGroup) {
            if (!this.loading && validationGroup.$invalid) {
                return 'text-danger';
            }
            return null;
        },
        relist() {
            this.$v.form.$reset();
            this.loading = true;

            this.axios.get(this.apiUrl).then((resp) => {
                this.populateForm(resp.data);
                this.loading = false;
            });
        },
        populateForm(data) {
            this.form = {
                base_url: data.base_url,
                instance_name: data.instance_name,
                prefer_browser_url: data.prefer_browser_url,
                use_radio_proxy: data.use_radio_proxy,
                history_keep_days: data.history_keep_days,
                enable_websockets: data.enable_websockets,
                enable_advanced_features: data.enable_advanced_features,

                analytics: data.analytics,

                always_use_ssl: data.always_use_ssl,
                api_access_control: data.api_access_control,

                check_for_updates: data.check_for_updates,
                mail_enabled: data.mail_enabled,
                mail_sender_name: data.mail_sender_name,
                mail_sender_email: data.mail_sender_email,
                mail_smtp_host: data.mail_smtp_host,
                mail_smtp_port: data.mail_smtp_port,
                mail_smtp_secure: data.mail_smtp_secure,
                mail_smtp_username: data.mail_smtp_username,
                mail_smtp_password: data.mail_smtp_password,
                avatar_service: data.avatar_service,
                avatar_default_url: data.avatar_default_url,
                use_external_album_art_in_apis: data.use_external_album_art_in_apis,
                use_external_album_art_when_processing_media: data.use_external_album_art_when_processing_media,
                last_fm_api_key: data.last_fm_api_key
            }
        },
        submit() {
            this.$v.form.$touch();
            if (this.$v.form.$anyError) {
                return;
            }

            this.$wrapWithLoading(
                this.axios({
                    method: 'PUT',
                    url: this.apiUrl,
                    data: this.form
                })
            ).then((resp) => {
                this.$emit('saved');

                this.$notifySuccess(this.$gettext('Changes saved.'));
                this.relist();
            });
        }
    }
}
</script>
