<template>
    <form
        class="form vue-form"
        @submit.prevent="submit"
    >
        <section
            class="card"
            role="region"
        >
            <div class="card-header bg-primary-dark">
                <h2 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>

            <b-overlay
                variant="card"
                :show="loading"
            >
                <div class="card-body">
                    <b-form-fieldset
                        v-for="(row, index) in config"
                        :key="index"
                        class="mb-0"
                    >
                        <b-wrapped-form-group
                            v-if="row.is_field"
                            :id="'form_edit_'+row.field_name"
                            :field="v$[row.field_name]"
                            input-type="textarea"
                            :input-attrs="{class: 'text-preformatted mb-3', spellcheck: 'false', 'max-rows': 20, rows: 5}"
                        />
                        <b-form-markup
                            v-else
                            :id="'form_section_'+index"
                        >
                            <pre class="typography-body-1">{{ row.markup }}</pre>
                        </b-form-markup>
                    </b-form-fieldset>

                    <b-button
                        size="lg"
                        type="submit"
                        :variant="(v$.$invalid) ? 'danger' : 'primary'"
                    >
                        {{ $gettext('Save Changes') }}
                    </b-button>
                </div>
            </b-overlay>
        </section>
    </form>
</template>

<script setup>
import BFormFieldset from "~/components/Form/BFormFieldset";
import BWrappedFormGroup from "~/components/Form/BWrappedFormGroup";
import BFormMarkup from "~/components/Form/BFormMarkup";
import {forEach} from "lodash";
import mergeExisting from "~/functions/mergeExisting";
import InfoCard from "~/components/Common/InfoCard";
import {useVuelidateOnForm} from "~/functions/useVuelidateOnForm";
import {onMounted, ref} from "vue";
import {mayNeedRestartProps, useMayNeedRestart} from "~/functions/useMayNeedRestart";
import {useAxios} from "~/vendor/axios";
import {useNotify} from "~/vendor/bootstrapVue";

const props = defineProps({
    ...mayNeedRestartProps,
    settingsUrl: {
        type: String,
        required: true
    },
    config: {
        type: Array,
        required: true
    },
    sections: {
        type: Array,
        required: true
    },
});

const buildForm = () => {
    let validations = {};
    let blankForm = {};

    forEach(props.sections, (section) => {
        validations[section] = {};
        blankForm[section] = null;
    });

    return {validations, blankForm};
}

const {validations, blankForm} = buildForm();
const {form, resetForm, v$, ifValid} = useVuelidateOnForm(validations, blankForm);

const loading = ref(true);

const {mayNeedRestart} = useMayNeedRestart(props);

const {axios} = useAxios();

const relist = () => {
    resetForm();

    loading.value = true;
    axios.get(props.settingsUrl).then((resp) => {
        form.value = mergeExisting(form.value, resp.data);
        loading.value = false;
    });
};

onMounted(relist);

const {wrapWithLoading, notifySuccess} = useNotify();

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

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