<script setup lang="ts">
import { Ref, ref } from 'vue';
import Button from 'primevue/button';
import Dialog from 'primevue/dialog';
import ToggleSwitch from 'primevue/toggleswitch';
import * as path from '@tauri-apps/api/path';
import { open } from '@tauri-apps/plugin-dialog';
import ProfileListEntry from './ProfileListEntry.vue';
import { invoke } from '../invoke';
import { useClientStore, useGeneralStore, usePrfStore } from '../stores';

const prf = usePrfStore();
const client = useClientStore();
const general = useGeneralStore();

const exportVisible = ref(false);
const exportKeychip = ref(false);
const files = new Set<string>();

const exportTemplate = async () => {
    const fl = [...files.values()];
    exportVisible.value = false;
    await invoke('export_profile', {
        exportKeychip: exportKeychip.value,
        files: fl,
    });
    await invoke('open_file', {
        path: await path.join(general.configDir, 'exports'),
    });
};

const fileList = {
    ongeki: ['aime.txt', 'inohara.cfg', 'mu3.ini', 'segatools-base.ini'],
    chunithm: ['aime.txt', 'saekawa.toml', 'segatools-base.ini'],
};

const fileListCurrent: Ref<string[]> = ref([]);

const recalcFileList = async () => {
    const res: string[] = [];
    files.clear();
    for (const idx in fileList[prf.current!.meta.game]) {
        const f = fileList[prf.current!.meta.game][idx];
        const p = await path.join(await prf.configDir, f);
        if (await invoke('file_exists', { path: p })) {
            res.push(f);
            files.add(f);
        }
    }
    fileListCurrent.value = res;
};

const openExportDialog = async () => {
    await recalcFileList();
    exportVisible.value = true;
};

const importPick = async () => {
    const res = await open({
        multiple: false,
        directory: false,
        filters: [
            {
                name: 'STARTLINER template',
                extensions: ['zip'],
            },
        ],
    });
    if (res != null) {
        await invoke('import_profile', { path: res });
        await prf.reloadList();
    }
};
</script>

<template>
    <Dialog
        modal
        :visible="exportVisible"
        :closable="false /*this shit doesn't work */"
        :header="`Export ${prf.current?.meta.name}`"
        :style="{ width: '300px', scale: client.scaleValue }"
    >
        <div class="flex flex-col gap-4">
            <div class="flex flex-row">
                <div class="grow">Export keychip</div>
                <ToggleSwitch v-model="exportKeychip" />
            </div>
            <div class="flex flex-row" v-for="f in fileListCurrent">
                <div class="grow">Export {{ f }}</div>
                <ToggleSwitch
                    :model-value="true"
                    @update:model-value="
                        (v) => {
                            if (v === true) {
                                files.add(f);
                            } else {
                                files.delete(f);
                            }
                        }
                    "
                />
            </div>
            <div style="width: 100%; text-align: center">
                <Button
                    class="m-auto mr-3"
                    style="width: 80px"
                    label="OK"
                    @click="() => exportTemplate()"
                />
                <Button
                    class="m-auto"
                    style="width: 80px"
                    label="Cancel"
                    @click="() => (exportVisible = false)"
                />
            </div>
        </div>
    </Dialog>
    <div v-if="prf.list.length === 0">
        Welcome to STARTLINER! Start by creating a profile.
    </div>
    <div class="mt-4 flex flex-row flex-wrap align-middle gap-4">
        <Button
            label="O.N.G.E.K.I. profile"
            icon="pi pi-file-plus"
            class="ongeki-button profile-button"
            @click="() => prf.create('ongeki')"
        />
        <Button
            label="CHUNITHM profile"
            icon="pi pi-file-plus"
            class="chunithm-button profile-button"
            @click="() => prf.create('chunithm')"
        />
    </div>
    <div class="mt-4 flex flex-row flex-wrap align-middle gap-4">
        <Button
            label="Import template"
            icon="pi pi-file-import"
            class="import-button profile-button"
            @click="() => importPick()"
        />
        <Button
            :disabled="prf.current === null"
            label="Export template"
            icon="pi pi-file-export"
            class="profile-button"
            @click="() => openExportDialog()"
        />
    </div>
    <div class="mt-12 flex flex-col flex-wrap align-middle gap-4">
        <div v-for="p in prf.list">
            <ProfileListEntry :p="p" />
        </div>
    </div>
</template>

<style>
.profile-button {
    width: 14em;
    white-space: nowrap;
}

.ongeki-button {
    background-color: var(--p-pink-400) !important;
    border-color: var(--p-pink-400) !important;
}

.ongeki-button:hover,
.ongeki-button:active {
    background-color: var(--p-pink-300) !important;
    border-color: var(--p-pink-300) !important;
}

.chunithm-button {
    background-color: var(--p-yellow-400) !important;
    border-color: var(--p-yellow-400) !important;
}
.chunithm-button:hover,
.chunithm-button:active {
    background-color: var(--p-yellow-300) !important;
    border-color: var(--p-yellow-300) !important;
}

.import-button {
    background-color: var(--p-purple-400) !important;
    border-color: var(--p-purple-400) !important;
}
.import-button:hover,
.import-button:active {
    background-color: var(--p-purple-300) !important;
    border-color: var(--p-purple-300) !important;
}
</style>
