export class Titlebar {
    public static addTitlebar(
        titlebarName: string,
        buttonName: string,
        toolbarControlImage: string,
        toolbarControlHoverImage: string,
        controlCallback: Function
    ) {
        if (document.getElementById(titlebarName)) return;

        let tbar = document.createElement('div');
        tbar.setAttribute('id', titlebarName);
        tbar.setAttribute('class', titlebarName);

        var toolbarControlButton = this.createButton(
            buttonName,
            buttonName,
            toolbarControlImage,
            toolbarControlHoverImage,
            () => {
                controlCallback();
            }
        );

        tbar.appendChild(toolbarControlButton);

        var hr = document.createElement('div');
        hr.setAttribute('class', 'titlebar-divider');
        tbar.appendChild(hr);

        document.body.appendChild(tbar);

        const dwv = document.getElementById('webview');
        if (dwv) {
            dwv.style.top = '32px';
        }
    }

    public static removeTitlebar(titlebarName: string) {
        let tbar = document.getElementById(titlebarName);
        if (tbar) {
            document.body.removeChild(tbar);
            const dwv = document.getElementById('webview');
            if (dwv) {
                dwv.style.top = '0px';
            }
        }
    }

    public static updateImageUrl(imageId: string, newImageUrl: string) {
        var image = document.getElementById(imageId) as HTMLImageElement;
        if (image) image.src = newImageUrl;
    }

    public static createImage(imageId: string, imageUrl: string) {
        var image = document.createElement('img');
        image.setAttribute('id', imageId);
        image.src = imageUrl;
        return image;
    }

    public static createButton(
        buttonId: string,
        buttonClass: string,
        buttonImgNormal: string,
        buttonImgHover: string,
        onClickFunction: Function
    ) {
        var button = document.createElement('div');
        button.setAttribute('class', buttonClass);
        var buttonImg = this.createImage(buttonId, buttonImgNormal);
        button.appendChild(buttonImg);

        this.setButtonProperties(button, buttonId, buttonImgNormal, buttonImgHover, onClickFunction);

        return button;
    }

    public static setButtonProperties(
        button: HTMLElement,
        buttonId: string,
        buttonImgNormal: string,
        buttonImgHover: string,
        onClickFunction: Function
    ) {
        if (button) {
            button.onmouseover = () => {
                this.updateImageUrl(buttonId, buttonImgHover);
            };

            button.onmouseout = () => {
                this.updateImageUrl(buttonId, buttonImgNormal);
            };

            button.onclick = () => {
                this.updateImageUrl(buttonId, buttonImgNormal);
                if (onClickFunction) {
                    onClickFunction();
                }
            };
        }
    }
}