<script type="text/x-template" id="audiolabs-page">
    <div class="audiolabs-page">
        <div class="md-option-container">
            <div class="settings-option-body">
                <div class="md-option-line">
                    <b-jumbotron :header="$root.getLz('settings.option.audio.audioLab')"
                                 lead="Designed by Cider Acoustic Technologies in California"></b-jumbotron>
                </div>
                <div class="md-option-line" v-show="app.cfg.advanced.AudioContext === false">
                    <div class="md-option-segment">
                        {{$root.getLz('settings.warn.audioLab.withoutAF')}}
                    </div>
                    <button class="md-btn" style="margin-top: 5px;" onclick="app.appRoute('settings')">
                        {{$root.getLz('term.settings')}}
                    </button>
                </div>
                <div class="md-option-line" v-show="app.cfg.advanced.AudioContext === true">
                    <div class="md-option-segment">
                        {{$root.getLz('settings.option.audio.enableAdvancedFunctionality.ciderPPE')}}
                        <br>
                        <small>{{$root.getLz('settings.option.audio.enableAdvancedFunctionality.ciderPPE.description')}}</small>
                    </div>
                    <div class="md-option-segment md-option-segment_auto">
                        <input type="checkbox" v-model="app.cfg.audio.maikiwiAudio.ciderPPE"
                               v-on:change="CiderAudio.hierarchical_loading();" switch/>
                    </div>
                </div>
                <div class="md-option-line" v-show="app.cfg.audio.maikiwiAudio.ciderPPE === true">
                    <div class="md-option-segment">
                        {{$root.getLz('settings.option.audio.enableAdvancedFunctionality.ciderPPEStrength')}}
                        <br>
                        <small>{{$root.getLz('settings.option.audio.enableAdvancedFunctionality.ciderPPEStrength.description')}}</small>
                    </div>
                    <div class="md-option-segment md-option-segment_auto">
                        <select class="md-select" style="width:180px;"
                                v-model="app.cfg.audio.maikiwiAudio.ciderPPE_value"
                                v-on:change="CiderAudio.hierarchical_loading()">
                            <option value="MAIKIWI">Maikiwi ({{$root.getLz('settings.option.audio.enableAdvancedFunctionality.ciderPPEStrength.adaptive')}})</option>
                            <option value="MAIKIWI_LEGACY">Maikiwi ({{$root.getLz('settings.option.audio.enableAdvancedFunctionality.ciderPPEStrength.legacy')}})</option>
                            <option value="NATURAL">
                                {{$root.getLz('settings.option.audio.enableAdvancedFunctionality.ciderPPEStrength.standard')}}
                            </option>
                            <option value="LEGACY">{{$root.getLz('settings.option.audio.enableAdvancedFunctionality.ciderPPEStrength.legacy')}}</option>
                        </select>
                    </div>
                </div>
                <div class="md-option-line" v-show="app.cfg.advanced.AudioContext === true">
                    <div class="md-option-segment">
                        Cider Opportunistic Correction System
                        <br>
                        <small>Takes advantage of the sonic characteristics of a specific equipment and adapts it to be more 'Cider' oriented.</small>
                    </div>
                    <div class="md-option-segment md-option-segment_auto">
                        <select class="md-select" style="width:180px;"
                                v-model="app.cfg.audio.maikiwiAudio.opportunisticCorrection_state"
                                v-on:change="CiderAudio.hierarchical_loading()">
                            <option value="OFF">OFF</option>
                            <option value="CHU">Moondrop Chu</option>
                        </select>
                    </div>
                </div>
                <div class="md-option-line" v-show="app.cfg.advanced.AudioContext === true">
                    <div class="md-option-segment">
                        {{$root.getLz('settings.option.audio.enableAdvancedFunctionality.atmosphereRealizer')}} [1]
                        <br>
                        <small>{{$root.getLz('settings.option.audio.enableAdvancedFunctionality.atmosphereRealizer.description')}}</small>
                    </div>
                    <div class="md-option-segment md-option-segment_auto">
                        <input type="checkbox" v-model="app.cfg.audio.maikiwiAudio.atmosphereRealizer1"
                               v-on:change="CiderAudio.hierarchical_loading();" switch/>
                    </div>
                </div>
                <div class="md-option-line" v-show="app.cfg.audio.maikiwiAudio.atmosphereRealizer1 === true">
                    <div class="md-option-segment">
                        {{$root.getLz('settings.option.audio.enableAdvancedFunctionality.atmosphereRealizerMode')}} [1]
                        <br>
                        <small>{{$root.getLz('settings.option.audio.enableAdvancedFunctionality.atmosphereRealizerMode.description')}}</small>
                    </div>
                    <div class="md-option-segment md-option-segment_auto">
                        <select class="md-select" style="width:230px;"
                                v-model="$root.cfg.audio.maikiwiAudio.atmosphereRealizer1_value"
                                v-on:change="CiderAudio.hierarchical_loading();">
                            <option v-for="profile in arprofiles" :value="profile.id">{{ getProfileLz("CAR", profile.id) }}</option>
                        </select>
                    </div>
                </div>
                <div class="md-option-line" v-show="app.cfg.advanced.AudioContext === true">
                    <div class="md-option-segment">
                        {{$root.getLz('settings.option.audio.enableAdvancedFunctionality.atmosphereRealizer')}} [2]
                        <br>
                        <small>{{$root.getLz('settings.option.audio.enableAdvancedFunctionality.atmosphereRealizer.description')}}</small>
                    </div>
                    <div class="md-option-segment md-option-segment_auto">
                        <input type="checkbox" v-model="app.cfg.audio.maikiwiAudio.atmosphereRealizer2"
                               v-on:change="CiderAudio.hierarchical_loading();" switch/>
                    </div>
                </div>
                <div class="md-option-line" v-show="app.cfg.audio.maikiwiAudio.atmosphereRealizer2 === true">
                    <div class="md-option-segment">
                        {{$root.getLz('settings.option.audio.enableAdvancedFunctionality.atmosphereRealizerMode')}} [2]
                        <br>
                        <small>{{$root.getLz('settings.option.audio.enableAdvancedFunctionality.atmosphereRealizerMode.description')}}</small>
                    </div>
                    <div class="md-option-segment md-option-segment_auto">
                        <select class="md-select" style="width:230px;"
                                v-model="$root.cfg.audio.maikiwiAudio.atmosphereRealizer2_value"
                                v-on:change="CiderAudio.hierarchical_loading();">
                            <option v-for="profile in arprofiles" :value="profile.id">{{ getProfileLz("CAR", profile.id) }}</option>
                        </select>
                    </div>
                </div>
                <div class="md-option-line" v-show="app.cfg.advanced.AudioContext === true">
                    <div class="md-option-segment">
                        {{$root.getLz('settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization')}}
                        <br>
                        <small>{{$root.getLz('settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization.description')}}</small>
                    </div>
                    <div class="md-option-segment md-option-segment_auto">
                        <input type="checkbox" v-model="app.cfg.audio.maikiwiAudio.spatial"
                               v-on:change="CiderAudio.hierarchical_loading();" switch/>
                    </div>
                </div>
                <div class="md-option-line"
                     v-show="app.cfg.audio.maikiwiAudio.spatial === true">
                    <div class="md-option-segment">
                        {{$root.getLz('settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization.profile')}}
                        <br>
                        <small>{{$root.getLz('settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization.profile.description')}}</small>
                    </div>
                    <div class="md-option-segment md-option-segment_auto">
                        <select class="md-select" style="width:180px;"
                                v-model="$root.cfg.audio.maikiwiAudio.spatialProfile"
                                v-on:change="CiderAudio.hierarchical_loading();">
                            <option v-for="profile in spprofiles" :value="profile.id">{{ getProfileLz("CTS", profile.name) }}</option>
                        </select>
                    </div>
                </div>
                <div style="opacity: 0.5; pointer-events: none" v-if="false">
                    <div class="md-option-header">
                        <span>{{$root.getLz('settings.header.unfinished')}}</span>
                    </div>
                    <div class="md-option-line" v-show="app.cfg.advanced.AudioContext === true">
                        <div class="md-option-segment">
                            Cider Origami™️ Vocal Enhancer/Remasterer
                            <br>
                            <small>Re-textures the vocals by carving out the frequencies and adjusts them to the
                                selected profile.<br>
                                <b>Modern:</b>
                                Modernizes vocals that was recorded on old microphones while preserving the artist's individualistic style.<br>
                                <b>Articulate:</b>
                                Wrapping every detail of the vocal to your ear, resulting in a more expressive voice.
                            </small>
                        </div>
                        <div class="md-option-segment md-option-segment_auto">
                            <select class="md-select">
                                <option value="none">
                                    {{$root.getLz('settings.header.visual.windowBackgroundStyle.none')}}
                                </option>
                                <option value="modern">
                                    Modern
                                </option>
                                <option value="intimate">
                                    Intimate
                                </option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</script>

<script>
    Vue.component('audiolabs-page', {
        template: "#audiolabs-page",
        props: [],
        data: function () {
            return {
                app: this.$root,
                arprofiles: CiderAudio.atmosphereRealizerProfiles,
                spprofiles: CiderAudio.spatialProfiles
            }
        },
        mounted: function () {

        },
        methods: {
            getProfileLz(type, name) {
                let result = "";
                
                // Hard-coded shiz
                switch (name) {
                    case "Maikiwi":
                        return "Maikiwi";
                        break;

                    case "Maikiwi+":
                    return "Maikiwi+";
                        break;

                    case "Minimal+":
                    return this.$root.getLz('settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization.profile.minimal') + "+";
                        break;

                    case "live":
                    return "LIVE";
                        break;
                }          
                switch (type) {
                    case "CAR":
                        result = this.$root.getLz('settings.option.audio.enableAdvancedFunctionality.atmosphereRealizerMode.' + name);
                        if (result === "settings.option.audio.enableAdvancedFunctionality.atmosphereRealizerMode." + name) {
                            return name;
                        }
                        else {return result;}
                        break;
                    case "CTS":
                        result = this.$root.getLz('settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization.profile.' + name.toLowerCase());
                        if (result === "settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization.profile." + name.toLowerCase()) {
                            return name;
                        }
                        else {return result;}
                        break;
                    default:
                        return name;
                }
            }
        }
    })
</script>