import { sleep } from 'mutate-animate';
import { Component, markRaw, ref, Ref, shallowReactive, watch } from 'vue';
import Book from '../ui/book.vue';
import Toolbox from '../ui/toolbox.vue';
import Equipbox from '../ui/equipbox.vue';
import Settings from '../ui/settings.vue';
import Desc from '../ui/desc.vue';
import Skill from '../ui/skill.vue';
import SkillTree from '../ui/skillTree.vue';
import Fly from '../ui/fly.vue';
import FixedDetail from '../ui/fixedDetail.vue';
import Shop from '../ui/shop.vue';
import Achievement from '../ui/achievement.vue';
import Bgm from '../ui/bgmList.vue';

// todo: 优化开启控制器

export const bookOpened = ref(false);
export const toolOpened = ref(false);
export const equipOpened = ref(false);
export const showStatusBar = ref(false);
export const settingsOpened = ref(false);
export const descOpened = ref(false);
export const skillOpened = ref(false);
export const skillTreeOpened = ref(false);
export const flyOpened = ref(false);
export const showStudiedSkill = ref(false);
export const fixedDetailOpened = ref(false);
export const shopOpened = ref(false);
export const startOpened = ref(true);
export const achievementOpened = ref(false);
export const bgmOpened = ref(false);

export const transition = ref(true);
export const noClosePanel = ref(false);

export const startAnimationEnded = ref(false);

let app: HTMLDivElement;

/** ui声明列表 */
const UI_LIST: [Ref<boolean>, Component][] = [
    // [bookOpened, Book],
    // [toolOpened, Toolbox],
    // [equipOpened, Equipbox],
    // [settingsOpened, Settings],
    // [descOpened, Desc],
    // [skillOpened, Skill],
    // [skillTreeOpened, SkillTree],
    // [flyOpened, Fly],
    // [fixedDetailOpened, FixedDetail],
    // [shopOpened, Shop],
    // [achievementOpened, Achievement],
    // [bgmOpened, Bgm]
];

/** ui栈 */
export const uiStack = shallowReactive<Component[]>([]);

export default function init() {
    // app = document.getElementById('root') as HTMLDivElement;
    // UI_LIST.forEach(([ref, com]) => {
    //     watch(ref, n => {
    //         if (n === true) {
    //             uiStack.push(markRaw(com));
    //             showApp();
    //         } else {
    //             const index = uiStack.findIndex(v => v === com);
    //             if (index === -1) return;
    //             if (uiStack.length === 1) {
    //                 hideApp(index);
    //             } else {
    //                 uiStack.splice(index, 1);
    //             }
    //         }
    //     });
    // });
    return {
        uiStack,
        transition,
        bookOpened,
        toolOpened,
        equipOpened,
        showStatusBar,
        settingsOpened,
        descOpened,
        skillOpened,
        skillTreeOpened,
        flyOpened,
        showStudiedSkill,
        fixedDetailOpened,
        shopOpened,
        startOpened,
        startAnimationEnded,
        achievementOpened,
        bgmOpened
    };
}

async function showApp() {
    core.lockControl();

    if (transition.value) {
        app.style.transition = 'all 0.6s linear';
    } else {
        app.style.transition = 'none';
    }
    app.style.display = 'flex';
    await sleep(50);
    app.style.opacity = '1';
}

async function hideApp(index: number) {
    if (transition.value) {
        app.style.transition = 'all 0.6s linear';
        app.style.opacity = '0';
        await sleep(600);
    } else {
        app.style.transition = '';
        app.style.opacity = '0';
    }
    uiStack.splice(index, 1);
    app.style.display = 'none';
    if (!noClosePanel.value) core.closePanel();
    noClosePanel.value = false;
}