<script setup lang="ts">
import { computed } from 'vue';
import SelectButton from 'primevue/selectbutton';
import ToggleSwitch from 'primevue/toggleswitch';
import OptionCategory from '../OptionCategory.vue';
import OptionRow from '../OptionRow.vue';
import { useClientStore } from '../../stores';

const client = useClientStore();

const offlineModel = computed({
    get() {
        return client.offlineMode;
    },
    async set(value: boolean) {
        await client.setOfflineMode(value);
    },
});
</script>

<template>
    <OptionCategory title="Startliner">
        <OptionRow title="UI scaling">
            <SelectButton
                v-model="client.scaleModel"
                :options="[
                    { title: 'S', value: 's' },
                    { title: 'M', value: 'm' },
                    { title: 'L', value: 'l' },
                    { title: 'XL', value: 'xl' },
                ]"
                :allow-empty="false"
                option-label="title"
                option-value="value"
            />
        </OptionRow>
        <OptionRow title="Offline mode" tooltip="Applies after a restart">
            <ToggleSwitch v-model="offlineModel" />
        </OptionRow>
    </OptionCategory>
</template>
