<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);
    },
});

const updatesModel = computed({
    get() {
        return client.enableAutoupdates;
    },
    async set(value: boolean) {
        await client.setAutoupdates(value);
    },
});

const verboseModel = computed({
    get() {
        return client.verbose;
    },
    async set(value: boolean) {
        await client.setVerbose(value);
    },
});

const themeModel = computed({
    get() {
        return client.theme;
    },
    async set(value: 'light' | 'dark' | 'system') {
        await client.setTheme(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="Disables the package store. Applies after a restart."
        >
            <ToggleSwitch v-model="offlineModel" />
        </OptionRow>
        <OptionRow title="Enable automatic updates">
            <ToggleSwitch v-model="updatesModel" />
        </OptionRow>
        <OptionRow
            title="Enable detailed logs"
            tooltip="Applies after a restart."
        >
            <ToggleSwitch v-model="verboseModel" />
        </OptionRow>
        <OptionRow title="Theme">
            <SelectButton
                v-model="themeModel"
                :options="[
                    { title: 'System', value: 'system' },
                    { title: 'Light', value: 'light' },
                    { title: 'Dark', value: 'dark' },
                ]"
                :allow-empty="false"
                option-label="title"
                option-value="value"
            />
        </OptionRow>
    </OptionCategory>
</template>
