<script setup lang="ts">
import { Ref, computed, ref } from 'vue';
import InputNumber from 'primevue/inputnumber';
import Select from 'primevue/select';
import SelectButton from 'primevue/selectbutton';
import ToggleSwitch from 'primevue/toggleswitch';
import OptionCategory from '../OptionCategory.vue';
import OptionRow from '../OptionRow.vue';
import { invoke } from '../../invoke';
import { usePrfStore } from '../../stores';

const capabilities: Ref<string[]> = ref([]);
const displayList: Ref<{ title: string; value: string }[]> = ref([
    {
        title: 'Primary',
        value: 'default',
    },
]);
const prf = usePrfStore();

const extraDisplayOptionsDisabled = computed(() => {
    return prf.current?.data.display.target === 'default';
});

const loadDisplays = () => {
    const newList = [
        {
            title: 'Primary',
            value: 'default',
        },
    ];
    invoke('list_platform_capabilities')
        .then(async (v: unknown) => {
            let different = false;
            if (Array.isArray(v)) {
                capabilities.value.push(...v);
            }
            if (capabilities.value.includes('display')) {
                for (const [devName, devString] of (await invoke(
                    'list_displays'
                )) as Array<[string, string]>) {
                    newList.push({
                        title: `${devName.replace('\\\\.\\', '')} (${devString})`,
                        value: devName,
                    });
                    if (
                        displayList.value.find(
                            (item) => item.value === devName
                        ) === undefined
                    ) {
                        different = true;
                    }
                }
            }
            if (displayList.value.length !== newList.length) {
                different = true;
            }
            if (different) {
                displayList.value = newList;
            }
        })
        .catch(() => {});
};

loadDisplays();
</script>

<template>
    <OptionCategory title="Display">
        <OptionRow
            v-if="capabilities.includes('display')"
            title="Target display"
        >
            <Select
                v-model="prf.current!.data.display.target"
                :options="displayList"
                option-label="title"
                option-value="value"
                placeholder="(Disconnected)"
                @show="loadDisplays"
            ></Select>
        </OptionRow>
        <OptionRow class="number-input" title="Game resolution">
            <InputNumber
                class="shrink"
                size="small"
                :min="480"
                :max="9999"
                :use-grouping="false"
                v-model="prf.current!.data.display.rez[0]"
            />
            x
            <InputNumber
                class="shrink"
                size="small"
                :min="640"
                :max="9999"
                :use-grouping="false"
                v-model="prf.current!.data.display.rez[1]"
            />
        </OptionRow>
        <OptionRow title="Display mode">
            <SelectButton
                v-model="prf.current!.data.display.mode"
                :options="[
                    { title: 'Window', value: 'Window' },
                    { title: 'Borderless window', value: 'Borderless' },
                    { title: 'Fullscreen', value: 'Fullscreen' },
                ]"
                :allow-empty="false"
                option-label="title"
                option-value="value"
            />
        </OptionRow>
        <OptionRow
            title="Display rotation"
            v-if="capabilities.includes('display')"
        >
            <SelectButton
                v-model="prf.current!.data.display.rotation"
                :options="[
                    { title: 'Unchanged', value: 0 },
                    { title: 'Portrait', value: 90 },
                    { title: 'Portrait (flipped)', value: 270 },
                ]"
                :allow-empty="false"
                option-label="title"
                option-value="value"
                :disabled="extraDisplayOptionsDisabled"
            />
        </OptionRow>
        <OptionRow
            v-if="capabilities.includes('display')"
            class="number-input"
            title="Refresh Rate"
        >
            <InputNumber
                class="shrink"
                size="small"
                :min="60"
                :max="999"
                :use-grouping="false"
                v-model="prf.current!.data.display.frequency"
                :disabled="extraDisplayOptionsDisabled"
            />
        </OptionRow>
        <OptionRow
            title="Borderless fullscreen"
            v-if="capabilities.includes('display')"
            tooltip="Match display resolution with the game."
        >
            <ToggleSwitch
                :disabled="
                    extraDisplayOptionsDisabled ||
                    prf.current?.data.display.mode !== 'Borderless'
                "
                v-model="prf.current!.data.display.borderless_fullscreen"
            />
        </OptionRow>
        <OptionRow
            title="Skip switching primary display"
            v-if="
                capabilities.includes('display') &&
                prf.current?.data.display.target !== 'default' &&
                (prf.current!.data.display.dont_switch_primary ||
                    displayList.length > 2)
            "
            dangerous-tooltip="Only enable this option if switching the primary display causes issues. The monitors must have a matching refresh rate."
        >
            <ToggleSwitch
                :disabled="extraDisplayOptionsDisabled"
                v-model="prf.current!.data.display.dont_switch_primary"
            />
        </OptionRow>
        <OptionRow
            title="Unity display index"
            class="number-input"
            v-if="
                capabilities.includes('display') &&
                prf.current?.data.display.target !== 'default' &&
                prf.current!.data.display.dont_switch_primary
            "
        >
            <InputNumber
                class="shrink"
                size="small"
                :min="1"
                :max="32"
                :use-grouping="false"
                v-model="prf.current!.data.display.monitor_index_override"
                :disabled="extraDisplayOptionsDisabled"
                :allow-empty="true"
            />
        </OptionRow>
    </OptionCategory>
</template>
