<script setup lang="ts">
import { Ref, computed, ref } from 'vue';
import InputNumber from 'primevue/inputnumber';
import InputText from 'primevue/inputtext';
import Select from 'primevue/select';
import SelectButton from 'primevue/selectbutton';
import ToggleSwitch from 'primevue/toggleswitch';
import { invoke as unproxied_invoke } from '@tauri-apps/api/core';
import FileEditor from './FileEditor.vue';
import FilePicker from './FilePicker.vue';
import OptionCategory from './OptionCategory.vue';
import OptionRow from './OptionRow.vue';
import { invoke } from '../invoke';
import { usePrfStore } from '../stores';

const prf = usePrfStore();

const aimeCode = ref('');
const capabilities: Ref<string[]> = ref([]);

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

const hookList: Ref<{ title: string; value: string }[]> = ref([
    {
        title: 'segatools-mu3hook',
        value: 'segatools-mu3hook',
    },
]);

unproxied_invoke('read_profile_data', {
    path: 'aime.txt',
})
    .then((v: unknown) => {
        if (typeof v === 'string') {
            aimeCode.value = v;
        } else {
            aimeCode.value = '';
        }
    })
    .catch(() => {
        aimeCode.value = '';
    });

invoke('list_platform_capabilities')
    .then(async (v: unknown) => {
        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]>) {
                displayList.value.push({
                    title: `${devName.replace('\\\\.\\', '')} (${devString})`,
                    value: devName,
                });
            }
        }
    })
    .catch(() => {});

const aimeCodeModel = computed({
    get() {
        return aimeCode.value;
    },
    async set(value: string) {
        aimeCode.value = value;
        if (value.match(/^[0-9]{20}$/)) {
            await invoke('write_profile_data', {
                path: 'aime.txt',
                content: aimeCode.value,
            });
        }
    },
});
</script>

<template>
    <OptionCategory title="General">
        <!-- <OptionRow title="mu3.exe">
            <FilePicker
                field="game-dir"
                default=""
                :directory="false"
                promptname="mu3.exe"
                extension="exe"
            ></FilePicker>
        </OptionRow> -->
        <OptionRow title="mu3hook">
            <Select
                :model-value="prf.cfg('hook', 'segatools-mu3hook')"
                :options="hookList"
                option-label="title"
                option-value="value"
            ></Select>
        </OptionRow>
        <OptionRow title="amfs">
            <FilePicker
                field="amfs"
                default=""
                placeholder="amfs"
                :directory="true"
            ></FilePicker>
        </OptionRow>
        <OptionRow title="option">
            <FilePicker
                field="option"
                default="option"
                :directory="true"
            ></FilePicker>
        </OptionRow>
        <OptionRow title="appdata">
            <FilePicker
                field="appdata"
                default="appdata"
                :directory="true"
            ></FilePicker>
        </OptionRow>
    </OptionCategory>
    <OptionCategory title="Display">
        <OptionRow
            v-if="capabilities.includes('display')"
            title="Target display"
        >
            <Select
                :model-value="prf.cfg('display', 'default')"
                :options="displayList"
                option-label="title"
                option-value="value"
            ></Select>
        </OptionRow>
        <OptionRow id="resolution" title="Game resolution">
            <InputNumber
                class="shrink"
                size="small"
                :min="480"
                :max="9999"
                :use-grouping="false"
                :model-value="
                    // prettier-ignore Because primevue fucked up
                    prf.cfg('rez-w', 1080) as any
                "
            />
            x
            <InputNumber
                class="shrink"
                size="small"
                :min="640"
                :max="9999"
                :use-grouping="false"
                :model-value="
                    // prettier-ignore
                    prf.cfg('rez-h', 1920) as any
                "
            />
        </OptionRow>
        <OptionRow title="Display mode">
            <SelectButton
                :model-value="prf.cfg('display-mode', 'borderless')"
                :options="[
                    { title: 'Window', value: 'window' },
                    { title: 'Borderless window', value: 'borderless' },
                    { title: 'Fullscreen', value: 'fullscreen' },
                ]"
                option-label="title"
                option-value="value"
            />
        </OptionRow>
        <OptionRow
            title="Display rotation"
            v-if="capabilities.includes('display')"
        >
            <SelectButton
                :model-value="prf.cfg('display-rotation', 0)"
                :options="[
                    { title: 'Unchanged', value: 0 },
                    { title: 'Portrait', value: 90 },
                    { title: 'Portrait (flipped)', value: 270 },
                ]"
                option-label="title"
                option-value="value"
                :disabled="prf.cfg('display', 'default').value === 'default'"
            />
        </OptionRow>
        <OptionRow
            title="Match display resolution with the game"
            v-if="capabilities.includes('display')"
        >
            <!-- @vue-expect-error -->
            <ToggleSwitch
                :disabled="
                    prf.cfg('display', 'default').value === 'default' ||
                    prf.cfg('display-mode', 'borderless').value != 'borderless'
                "
                :model-value="prf.cfg('borderless-fullscreen', false)"
            />
        </OptionRow>
    </OptionCategory>
    <OptionCategory title="Network">
        <OptionRow title="Server address">
            <InputText
                class="shrink"
                size="small"
                :maxlength="40"
                placeholder="192.168.1.234"
                :model-value="
                    // prettier-ignore
                    prf.cfg<string>('dns-default', '') as any
                "
            /> </OptionRow
        ><OptionRow title="Keychip">
            <InputText
                class="shrink"
                size="small"
                :maxlength="16"
                placeholder="A123-01234567890"
                :model-value="
                    // prettier-ignore
                    prf.cfg('keychip', '') as any
                "
            /> </OptionRow
        ><OptionRow title="Subnet">
            <InputText
                class="shrink"
                size="small"
                :maxlength="15"
                placeholder="192.168.1.0"
                :model-value="
                    // prettier-ignore
                    prf.cfg('subnet', '') as any
                "
            />
        </OptionRow>
    </OptionCategory>
    <OptionCategory title="Misc">
        <OptionRow title="OpenSSL bug workaround for Intel ≥10th gen">
            <!-- @vue-expect-error -->
            <ToggleSwitch :model-value="prf.cfg('intel', false)" />
        </OptionRow>
        <OptionRow title="Aime emulation">
            <!-- @vue-expect-error -->
            <ToggleSwitch :model-value="prf.cfg('aime', false)" />
        </OptionRow>
        <OptionRow title="Aime code">
            <InputText
                class="shrink"
                size="small"
                :disabled="prf.cfg<boolean>('aime', false).value !== true"
                :maxlength="20"
                placeholder="00000000000000000000"
                v-model="aimeCodeModel"
            />
        </OptionRow>
        <OptionRow title="More segatools options">
            <FileEditor filename="segatools-base.ini" />
        </OptionRow>
        <OptionRow title="Inohara config">
            <FileEditor
                filename="inohara.cfg"
                promptname="inohara config file"
                extension="cfg"
            />
        </OptionRow>
    </OptionCategory>
</template>

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

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