<script setup lang="ts">
import { Ref, onMounted, ref } from 'vue';
import { updatePrimaryPalette } from '@primevue/themes';
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 { invoke } from '@tauri-apps/api/core';
import { open } from '@tauri-apps/plugin-dialog';
import ModList from './ModList.vue';
import ModStore from './ModStore.vue';
import Options from './Options.vue';
import { Profile } from '../types';

const changePrimaryColor = (game: 'ongeki' | 'chunithm') => {
    const color = game === 'ongeki' ? 'pink' : 'yellow';

    updatePrimaryPalette({
        50: `{${color}.50}`,
        100: `{${color}.100}`,
        200: `{${color}.200}`,
        300: `{${color}.300}`,
        400: `{${color}.400}`,
        500: `{${color}.500}`,
        600: `{${color}.600}`,
        700: `{${color}.700}`,
        800: `{${color}.800}`,
        900: `{${color}.900}`,
        950: `{${color}.950}`,
    });
};

let profile: Ref<Profile | null> = ref(null);
let key = ref(0);

const loadProfile = async () => {
    profile = await invoke('get_current_profile');

    if (profile === null) {
        const file = await open({
            multiple: false,
            directory: false,
            filters: [
                {
                    name: 'mu3.exe' /* or chusanApp.exe'*/,
                    extensions: ['exe'],
                },
            ],
        });
        if (file !== null) {
            profile = await invoke('init_profile', { path: file });
        }
    }
    key.value += 1;
};

const isDisabled = () => profile === null;

onMounted(async () => {
    await loadProfile();
});

changePrimaryColor('ongeki');
</script>

<template>
    <main>
        <Tabs lazy value="3" class="h-screen">
            <div class="fixed w-full flex z-100">
                <TabList class="grow">
                    <Tab :disabled="isDisabled()" :key="key" value="0"
                        ><div class="pi pi-list-check"></div
                    ></Tab>
                    <Tab :disabled="isDisabled()" :key="key" value="1"
                        ><div class="pi pi-download"></div
                    ></Tab>
                    <Tab :disabled="isDisabled()" :key="key" value="2"
                        ><div class="pi pi-cog"></div
                    ></Tab>
                    <Tab value="3"
                        ><div class="pi pi-question-circle"></div
                    ></Tab>
                    <div class="grow"></div>
                    <Button
                        disabled
                        icon="pi pi-play"
                        label="START"
                        aria-label="start"
                        size="small"
                        class="m-2.5"
                    />
                </TabList>
            </div>
            <TabPanels class="w-full grow mt-[3rem]">
                <TabPanel value="0">
                    <ModList :profile="profile!" />
                </TabPanel>
                <TabPanel value="1">
                    <ModStore />
                </TabPanel>
                <TabPanel value="2">
                    <Options />
                </TabPanel>
                <TabPanel value="3">
                    UNDER CONSTRUCTION<br /><br />
                    <Button
                        label="Create profile"
                        icon="pi pi-plus"
                        aria-label="open-executable"
                        @click="loadProfile()"
                    />
                    <img
                        src="/sticker-ongeki.svg"
                        class="fixed bottom-0 right-0"
                    />
                </TabPanel>
            </TabPanels>
        </Tabs>
    </main>
</template>

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

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

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