import { reactive, ref } from 'vue'
import { setCursor, sendEvent, setGameData } from '@/composables/useCef'

export type InterfaceName = "Hud"

interface InterfaceState {
    visible: boolean;
    zIndex: number;
    data: Record<string, any>;
}

const zIndex = ref(100);

export const interfaces = reactive<Record<InterfaceName, InterfaceState>>({
    Hud: { 
        visible: !1,
        zIndex: 1,
        data: {}
    }
});

export function front(name: InterfaceName) {
    zIndex.value++;
    interfaces[name].zIndex = zIndex.value;
}

export function openInterface(name: InterfaceName, payload: Record<string, any> = {}) {
    interfaces[name].visible = true;
    interfaces[name].data = { ...interfaces[name].data, ...payload };
    front(name);
}

export function closeInterface(name: InterfaceName) {
    interfaces[name].visible = false;
}

export function isInterfaceVisible(name: InterfaceName) {
    return interfaces[name]?.visible ?? false;
}

export function updateInterface(name: InterfaceName, payload: Record<string, any>) {
    Object.assign(interfaces[name].data, payload);
}

export function updateInterfaceParam(name: InterfaceName, key: string, value: any) {
    interfaces[name].data[key] = value;
}

export function getInterfaceParam(name: InterfaceName, key: string, defValue: any = null) {
    return interfaces[name].data[key] !== undefined ? interfaces[name].data[key] : defValue;
}

export function getInterfaceData(name: InterfaceName) {
    return { ...interfaces[name].data };
}

export const refs: Record<InterfaceName, any> = {} as Record<InterfaceName, any>;

window.openInterface = openInterface;
window.closeInterface = closeInterface;
window.updateInterface = updateInterface;
window.updateInterfaceParam = updateInterfaceParam;
window.sendEvent = sendEvent;
window.setCursor = setCursor;
window.setGameData = setGameData;