<script setup lang="ts">
import InputNumber from 'primevue/inputnumber';
import ToggleSwitch from 'primevue/toggleswitch';
import OptionRow from './OptionRow.vue';
import { usePrfStore } from '../stores';
import { Patch } from '../types';

const prf = usePrfStore();

const toggleUnary = (key: string, val: boolean) => {
    if (val) {
        prf.current!.data.patches[key] = 'enabled';
    } else {
        delete prf.current!.data.patches[key];
    }
};

const setNumber = (key: string, val: number) => {
    if (val) {
        prf.current!.data.patches[key] = { number: val };
    } else {
        delete prf.current!.data.patches[key];
    }
};

defineProps({
    patch: Object as () => Patch,
});
</script>

<template>
    <OptionRow
        :title="patch?.name"
        :tooltip="patch?.tooltip"
        :greytext="patch?.id"
    >
        <ToggleSwitch
            v-if="patch?.type === undefined"
            :model-value="prf.current!.data.patches[patch!.id!] !== undefined"
            @update:model-value="(v: boolean) => toggleUnary(patch!.id!, v)"
        />
        <InputNumber
            v-else-if="patch?.type === 'number'"
            class="number-input"
            :model-value="
                (prf.current!.data.patches[patch!.id!] as any)?.number
            "
            @update:model-value="(v: number) => setNumber(patch!.id!, v)"
            :min="patch?.min"
            :max="patch?.max"
            :placeholder="(patch?.default ?? 0).toString()"
        />
    </OptionRow>
</template>
