import type { UserInputManager } from "../Phaser/UserInput/UserInputManager";
import {HtmlUtils} from "./HtmlUtils";

export enum LayoutMode {
    // All videos are displayed on the right side of the screen. If there is a screen sharing, it is displayed in the middle.
    Presentation = "Presentation",
    // Videos take the whole page.
    VideoChat = "VideoChat",
}

export enum DivImportance {
    // For screen sharing
    Important = "Important",
    // For normal video
    Normal = "Normal",
}

export const ON_ACTION_TRIGGER_BUTTON = 'onaction';

export const TRIGGER_WEBSITE_PROPERTIES = 'openWebsiteTrigger';
export const TRIGGER_JITSI_PROPERTIES = 'jitsiTrigger';

export const WEBSITE_MESSAGE_PROPERTIES = 'openWebsiteTriggerMessage';
export const JITSI_MESSAGE_PROPERTIES = 'jitsiTriggerMessage';

export const AUDIO_VOLUME_PROPERTY = 'audioVolume';
export const AUDIO_LOOP_PROPERTY = 'audioLoop';

export type Box = {xStart: number, yStart: number, xEnd: number, yEnd: number};

class LayoutManager {
    private actionButtonTrigger: Map<string, Function> = new Map<string, Function>();
    private actionButtonInformation: Map<string, HTMLDivElement> = new Map<string, HTMLDivElement>();

    public addActionButton(id: string, text: string, callBack: Function, userInputManager: UserInputManager){
        //delete previous element
        this.removeActionButton(id, userInputManager);

        //create div and text html component
        const p = document.createElement('p');
        p.classList.add('action-body');
        p.innerText = text;

        const div = document.createElement('div');
        div.classList.add('action');
        div.id = id;
        div.appendChild(p);

        this.actionButtonInformation.set(id, div);

        const mainContainer = HtmlUtils.getElementByIdOrFail<HTMLDivElement>('main-container');
        mainContainer.appendChild(div);

        //add trigger action
        div.onpointerdown = () => callBack();
        this.actionButtonTrigger.set(id, callBack);
        userInputManager.addSpaceEventListner(callBack);
    }

    public removeActionButton(id: string, userInputManager?: UserInputManager){
        //delete previous element
        const previousDiv = this.actionButtonInformation.get(id);
        if(previousDiv){
            previousDiv.remove();
            this.actionButtonInformation.delete(id);
        }
        const previousEventCallback = this.actionButtonTrigger.get(id);
        if(previousEventCallback && userInputManager){
            userInputManager.removeSpaceEventListner(previousEventCallback);
        }
    }

    public addInformation(id: string, text: string,  callBack?: Function, userInputManager?: UserInputManager){
        //delete previous element
        for ( const [key, value] of this.actionButtonInformation ) {
            this.removeActionButton(key, userInputManager);
        }

        //create div and text html component
        const p = document.createElement('p');
        p.classList.add('action-body');
        p.innerText = text;

        const div = document.createElement('div');
        div.classList.add('action');
        div.classList.add(id);
        div.id = id;
        div.appendChild(p);

        this.actionButtonInformation.set(id, div);

        const mainContainer = HtmlUtils.getElementByIdOrFail<HTMLDivElement>('main-container');
        mainContainer.appendChild(div);
        //add trigger action
        if(callBack){
            div.onpointerdown = () => {
                callBack();
                this.removeActionButton(id, userInputManager);
            };
        }

        //remove it after 10 sec
        setTimeout(() => {
            this.removeActionButton(id, userInputManager);
        }, 10000)
    }
}

const layoutManager = new LayoutManager();

export { layoutManager };