<script setup lang="ts">
import { computed } from 'vue';
import SelectButton from 'primevue/selectbutton';
import ToggleSwitch from 'primevue/toggleswitch';
import FileEditor from './FileEditor.vue';
import OptionCategory from './OptionCategory.vue';
import OptionRow from './OptionRow.vue';
import AimeOptions from './options/Aime.vue';
import DisplayOptions from './options/Display.vue';
import KeyboardOptions from './options/Keyboard.vue';
import MiscOptions from './options/Misc.vue';
import NetworkOptions from './options/Network.vue';
import SegatoolsOptions from './options/Segatools.vue';
import StartlinerOptions from './options/Startliner.vue';
import { usePrfStore } from '../stores';

const prf = usePrfStore();

const audioModel = computed({
    get() {
        return prf.current?.data.mu3_ini?.audio ?? null;
    },
    set(value: 'Shared' | 'Excl6Ch' | 'Excl2Ch') {
        if (prf.current!.data.mu3_ini === undefined) {
            prf.current!.data.mu3_ini = {};
        }
        prf.current!.data.mu3_ini!.audio = value;
    },
});

// const blacklistMinModel = computed({
//     get() {
//         if (prf.current?.data.mu3_ini?.blacklist === undefined) {
//             return null;
//         }
//         return prf.current?.data.mu3_ini?.blacklist[0];
//     },
//     set(value: number) {
//         if (prf.current!.data.mu3_ini === undefined) {
//             prf.current!.data.mu3_ini = {};
//         }
//         prf.current!.data.mu3_ini!.blacklist = [
//             value,
//             prf.current!.data.mu3_ini!.blacklist?.[1] ?? 19999,
//         ];
//     },
// });

// const blacklistMaxModel = computed({
//     get() {
//         if (prf.current?.data.mu3_ini?.blacklist === undefined) {
//             return null;
//         }
//         return prf.current?.data.mu3_ini?.blacklist[1];
//     },
//     set(value: number) {
//         if (prf.current!.data.mu3_ini === undefined) {
//             prf.current!.data.mu3_ini = {};
//         }
//         prf.current!.data.mu3_ini!.blacklist = [
//             prf.current!.data.mu3_ini!.blacklist?.[0] ?? 10000,
//             value,
//         ];
//     },
// });

prf.reload();
</script>

<template>
    <SegatoolsOptions />
    <DisplayOptions v-if="prf.current!.meta.game === 'ongeki'" />
    <NetworkOptions />
    <AimeOptions />
    <MiscOptions />
    <OptionCategory
        title="Extensions"
        v-if="prf.current!.meta.game === 'ongeki'"
    >
        <OptionRow title="Inohara config">
            <FileEditor
                filename="inohara.cfg"
                promptname="inohara config file"
                extension="cfg"
            />
        </OptionRow>
        <OptionRow title="BepInEx console">
            <!-- @vue-expect-error -->
            <ToggleSwitch v-model="prf.current!.data.bepinex.console" />
        </OptionRow>

        <OptionRow
            title="Audio mode"
            tooltip="Exclusive 2-channel mode requires a patch"
        >
            <SelectButton
                v-model="audioModel"
                :options="[
                    { title: 'Shared', value: 'Shared' },
                    { title: 'Exclusive 6-channel', value: 'Excl6Ch' },
                    { title: 'Exclusive 2-channel', value: 'Excl2Ch' },
                ]"
                :allow-empty="true"
                option-label="title"
                option-value="value"
        /></OptionRow>

        <!-- <OptionRow
            class="number-input"
            title="Song ID Blacklist"
            tooltip="Requires a patch"
            ><InputNumber
                class="shrink"
                size="small"
                :min="10000"
                :max="99999"
                placeholder="10000"
                :use-grouping="false"
                :allow-empty="false"
                v-model="blacklistMinModel" />
            x
            <InputNumber
                class="shrink"
                size="small"
                :min="10000"
                :max="99999"
                placeholder="19999"
                :use-grouping="false"
                :allow-empty="false"
                v-model="blacklistMaxModel"
        /></OptionRow> -->
    </OptionCategory>
    <KeyboardOptions />
    <StartlinerOptions />
</template>

<style>
.number-input .p-inputnumber-input {
    width: 4rem;
}

.p-inputtext {
    width: 40vw;
    font-family: monospace !important;
}

.p-select {
    width: 40vw;
}
</style>
