<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';
import Button from 'primevue/button';
import Tab from 'primevue/tab';
import TabList from 'primevue/tablist';
import TabPanel from 'primevue/tabpanel';
import TabPanels from 'primevue/tabpanels';
import Tabs from 'primevue/tabs';
import { onOpenUrl } from '@tauri-apps/plugin-deep-link';
import { open } from '@tauri-apps/plugin-dialog';
import ModList from './ModList.vue';
import ModStore from './ModStore.vue';
import Options from './Options.vue';
import StartButton from './StartButton.vue';
import { usePkgStore } from '../stores';
import { changePrimaryColor } from '../util';

const store = usePkgStore();
store.setupListeners();

const currentTab = ref('3');

const loadProfile = async (openWindow: boolean) => {
    await store.reloadProfile();

    if (store.profile === null && openWindow) {
        const exePath = await open({
            multiple: false,
            directory: false,
            filters: [
                {
                    name: 'mu3.exe' /* or chusanApp.exe'*/,
                    extensions: ['exe'],
                },
            ],
        });
        if (exePath !== null) {
            await store.initProfile(exePath);
        }
    }
    if (store.profile !== null) {
        changePrimaryColor(store.profile.game);
        currentTab.value = '0';
    }

    await store.reloadAll();
};

const isProfileDisabled = computed(() => store.profile === null);

onOpenUrl((urls) => {
    console.log('deep link:', urls);
});

onMounted(async () => {
    await loadProfile(false);
});
</script>

<template>
    <main>
        <Tabs lazy :value="currentTab" class="h-screen">
            <div class="fixed w-full flex z-100">
                <TabList class="grow">
                    <Tab :disabled="isProfileDisabled" value="0"
                        ><div class="pi pi-list-check"></div
                    ></Tab>
                    <Tab :disabled="isProfileDisabled" value="1"
                        ><div class="pi pi-download"></div
                    ></Tab>
                    <Tab :disabled="isProfileDisabled" value="2"
                        ><div class="pi pi-cog"></div
                    ></Tab>
                    <Tab value="3"
                        ><div class="pi pi-question-circle"></div
                    ></Tab>
                    <div class="grow"></div>
                    <StartButton />
                </TabList>
            </div>
            <TabPanels class="w-full grow mt-[3rem]">
                <TabPanel value="0">
                    <ModList />
                </TabPanel>
                <TabPanel value="1">
                    <ModStore />
                </TabPanel>
                <TabPanel value="2">
                    <Options />
                </TabPanel>
                <TabPanel value="3">
                    <strong>UNDER CONSTRUCTION</strong><br />Many features are
                    missing.<br />Existing features are expected to break any
                    time.
                    <div v-if="isProfileDisabled">
                        <br />Select <code>mu3.exe</code> to create a
                        profile:<br />
                        <Button
                            label="Create profile"
                            icon="pi pi-plus"
                            aria-label="open-executable"
                            @click="loadProfile(true)"
                        /><br />
                        <div
                            style="
                                margin-top: 5px;
                                font-weight: bolder;
                                font-size: 3em;
                                color: red;
                                line-height: 1.1em;
                            "
                        >
                            segatools 2024-12-23 or later has to be installed
                        </div>
                        (this will change in the future)
                    </div>
                    <img
                        v-if="store.profile?.game === 'Ongeki'"
                        src="/sticker-ongeki.svg"
                        class="fixed bottom-0 right-0"
                    />
                    <br /><br /><br />
                    <Button
                        style="position: fixed; left: 10px; bottom: 10px"
                        icon="pi pi-discord"
                        as="a"
                        target="_blank"
                        href="https://discord.gg/jxvzHjjEmc"
                    />
                </TabPanel>
            </TabPanels>
        </Tabs>
    </main>
</template>

<style lang="css">
@import 'tailwindcss';

.p-tablist-tab-list {
    height: 3rem;
}

html,
body {
    margin: 0;
    padding: 0;
}
</style>
