<script setup lang="ts">
import { computed } from 'vue';
import Fieldset from 'primevue/fieldset';
import InputNumber from 'primevue/inputnumber';
import InputText from 'primevue/inputtext';
import RadioButton from 'primevue/radiobutton';
import Toggle from 'primevue/toggleswitch';
import { usePkgStore } from '../stores';

const store = usePkgStore();
const _cfg = <T extends string | number | boolean>(key: string, dflt: T) =>
    computed({
        get() {
            return (store.cfg(key) as T) ?? dflt;
        },
        async set(value) {
            await store.set_cfg(key, value ?? dflt);
        },
    });

const cfgIntel = _cfg('intel', false);
const cfgRezW = _cfg('rez-w', 1080);
const cfgRezH = _cfg('rez-h', 1920);
const cfgDisplayMode = _cfg('display-mode', 'borderless');
const cfgAime = _cfg('aime', true);
const cfgAimeCode = _cfg('aime-code', '00001111222233334444');
</script>

<template>
    <Fieldset legend="Launch options" :toggleable="true">
        <div class="flex w-full flex-col gap-1">
            <label for="switch" class="flex flex-row w-full p-2">
                <div class="grow">
                    OpenSSL crash workaround for Intel ≥10th gen
                </div>
                <Toggle inputId="switch" v-model="cfgIntel" />
            </label>
            <label
                id="resolution"
                class="flex flex-row w-full p-2 gap-2 items-center"
            >
                <div class="grow">Resolution</div>
                <InputNumber
                    class="shrink"
                    size="small"
                    :min="480"
                    :max="9999"
                    :use-grouping="false"
                    v-model="cfgRezW"
                />
                x
                <InputNumber
                    class="shrink"
                    size="small"
                    :min="640"
                    :max="9999"
                    :use-grouping="false"
                    v-model="cfgRezH"
                />
            </label>
            <label class="flex flex-row w-full p-2 gap-2">
                <div class="grow">Display mode</div>
                <div class="flex items-center gap-2">
                    <RadioButton
                        v-model="cfgDisplayMode"
                        inputId="ingredient1"
                        name="window"
                        value="window"
                    />
                    <label for="ingredient1">window</label>
                </div>
                <div class="flex items-center gap-2">
                    <RadioButton
                        v-model="cfgDisplayMode"
                        inputId="ingredient2"
                        name="borderless"
                        value="borderless"
                    />
                    <label for="ingredient2">borderless window</label>
                </div>
                <div class="flex items-center gap-2">
                    <RadioButton
                        v-model="cfgDisplayMode"
                        inputId="ingredient3"
                        name="fullscreen"
                        value="fullscreen"
                    />
                    <label for="ingredient3">fullscreen</label>
                </div>
            </label>
            <label for="switch" class="flex flex-row w-full p-2">
                <div class="grow">Aime emulation</div>
                <Toggle inputId="switch" v-model="cfgAime" />
            </label>
            <label class="flex flex-row w-full p-2 items-center">
                <div class="grow">Aime code</div>
                <InputText
                    class="shrink"
                    size="small"
                    :disabled="store.cfg('aime') === false"
                    :minlength="20"
                    :maxlength="20"
                    placeholder="00000000000000000000"
                    v-model="cfgAimeCode"
                />
            </label>
        </div>
    </Fieldset>
</template>

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

.p-inputtext {
    font-family: monospace;
}
</style>
