<template>
    <form
        class="form vue-form"
        @submit.prevent="submit"
    >
        <section
            class="card"
            role="region"
            aria-labelledby="hdr_edit_ls_config"
        >
            <div class="card-header text-bg-primary">
                <h2
                    id="hdr_edit_ls_config"
                    class="card-title"
                >
                    {{ $gettext('Edit Liquidsoap Configuration') }}
                </h2>
            </div>

            <info-card>
                <p class="card-text">
                    {{
                        $gettext('Using this page, you can customize several sections of the Liquidsoap configuration. This allows you to add advanced functionality to your station\'s AutoDJ.')
                    }}
                </p>
                <p class="card-text">
                    {{
                        $gettext('The editable text boxes are areas where you can insert custom configuration code. The non-editable sections are automatically generated by AzuraCast.')
                    }}
                </p>
                <p class="card-text">
                    {{
                        $gettext('This is an advanced feature and custom code is not officially supported by AzuraCast. You may break your station by adding custom code, but removing it should fix any issues.')
                    }}
                </p>
            </info-card>

            <loading :loading="isLoading">
                <div class="card-body">
                    <form-fieldset
                        v-for="(row, index) in config"
                        :key="index"
                        class="mb-0"
                    >
                        <form-group-field
                            v-if="row.is_field"
                            :id="'form_edit_'+row.field_name"
                            :field="v$[row.field_name]"
                        >
                            <template #default="slotProps">
                                <codemirror-textarea
                                    :id="slotProps.id"
                                    v-model="slotProps.field.$model"
                                    mode="liquidsoap"
                                />
                            </template>
                        </form-group-field>
                        <form-markup
                            v-else
                            :id="'form_section_'+index"
                        >
                            <pre class="typography-body-1">{{ row.markup }}</pre>
                        </form-markup>
                    </form-fieldset>

                    <button
                        type="submit"
                        class="btn"
                        :class="(v$.$invalid) ? 'btn-danger' : 'btn-primary'"
                    >
                        {{ $gettext('Save Changes') }}
                    </button>
                </div>
            </loading>
        </section>
    </form>
</template>

<script setup lang="ts">
import FormFieldset from "~/components/Form/FormFieldset.vue";
import FormGroupField from "~/components/Form/FormGroupField.vue";
import FormMarkup from "~/components/Form/FormMarkup.vue";
import {forEach} from "lodash";
import mergeExisting from "~/functions/mergeExisting";
import InfoCard from "~/components/Common/InfoCard.vue";
import {useVuelidateOnForm} from "~/functions/useVuelidateOnForm";
import {computed, onMounted, ref} from "vue";
import {useMayNeedRestart} from "~/functions/useMayNeedRestart";
import {useAxios} from "~/vendor/axios";
import {useNotify} from "~/functions/useNotify";
import Loading from "~/components/Common/Loading.vue";
import {getStationApiUrl} from "~/router";
import CodemirrorTextarea from "~/components/Common/CodemirrorTextarea.vue";

const settingsUrl = getStationApiUrl('/liquidsoap-config');

const config = ref([]);
const sections = ref([]);

const {form, resetForm, v$, ifValid} = useVuelidateOnForm(
    computed(() => {
        const validations = {};
        forEach(sections.value, (section) => {
            validations[section] = {};
        });
        return validations;
    }),
    () => {
        const blankForm = {};
        forEach(sections.value, (section) => {
            blankForm[section] = null;
        });
        return blankForm;
    }
);

const isLoading = ref(true);

const {mayNeedRestart} = useMayNeedRestart();

const {axios} = useAxios();

const relist = () => {
    isLoading.value = true;
    axios.get(settingsUrl.value).then((resp) => {
        config.value = resp.data.config;
        sections.value = resp.data.sections;

        resetForm();
        form.value = mergeExisting(form.value, resp.data.contents);
    }).finally(() => {
        isLoading.value = false;
    });
};

onMounted(relist);

const {notifySuccess} = useNotify();

const submit = () => {
    ifValid(() => {
        axios({
            method: 'PUT',
            url: settingsUrl.value,
            data: form.value,
        }).then(() => {
            notifySuccess();

            mayNeedRestart();
            relist();
        });
    });
}
</script>
