<script setup lang="ts">
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 MiscOptions from './options/Misc.vue';
import NetworkOptions from './options/Network.vue';
import SegatoolsOptions from './options/Segatools.vue';
import { usePrfStore } from '../stores';

const prf = usePrfStore();

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>
    </OptionCategory>
</template>

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

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

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