import { ILabShell, JupyterFrontEnd, JupyterFrontEndPlugin} from '@jupyterlab/application';
import { IThemeManager,      ISplashScreen} from '@jupyterlab/apputils';
import { LabIcon, jupyterFaviconIcon, jupyterIcon, jupyterlabWordmarkIcon } from '@jupyterlab/ui-components';

import { Widget } from '@lumino/widgets';


import { Logo,FavIconIdle,FavIconBusy} from './images'; 
/**
 * Initialization data for the jupyterlab_sandbox_theme extension.
 */
const plugin: JupyterFrontEndPlugin<void> = {

    id: 'jupyterlab_sandbox_theme:plugin',
    requires: [IThemeManager, ILabShell,ISplashScreen],
    activate: (app: JupyterFrontEnd, manager: IThemeManager, shell: ILabShell) => {
        const style = 'jupyterlab_sandbox_theme/index.css';

        const logo_svg = Logo
        const logo_icon = new LabIcon({ name: 'ui-components:sandbox', svgstr: logo_svg });

        const logo = new Widget();
        logo_icon.element({
            container: logo.node,
            elementPosition: 'center',
            margin: '2px 2px 2px 8px',
            height: 'auto',
            width: '16px'
        });
        logo.id = 'jp-sandboxLogo';
        shell.add(logo, 'top', { rank: 0 });

        // Set the icons elsewhere
        jupyterFaviconIcon.svgstr = logo_svg;
        jupyterIcon.svgstr = logo_svg;
        jupyterlabWordmarkIcon.svgstr = logo_svg;

        // Register the plugin
        manager.register({
            name: 'Sandbox',
            isLight: true,
            themeScrollbars: true,
            load: () => manager.loadCSS(style),
            unload: () => Promise.resolve(undefined)
        });
        // hack to change favicons
        let idle = FavIconIdle
        let busy = FavIconBusy
        waitForElement('.idle', document.head).then((elm: any) => {
            elm.setAttribute("href",idle)
        });
        waitForElement('.busy',document.head).then((elm: any) => {
            elm.setAttribute("href",busy)
        });
        waitForElement('#jupyterlab-splash',document.body).then((elm: any) => {
            console.log(elm)
            let child = elm.firstChild
            child.innerHTML = ' <div class="cube"> <div class="cube1"></div> <div class="cube2"></div></div>';
            child.classList.add("spinner")
  
        });
  
    },
    autoStart: true
};

function waitForElement(selector: any, documentArea: any) {
    return new Promise(resolve => {
        if (document.querySelector(selector)) {
            return resolve(document.querySelector(selector));
        }

        const observer = new MutationObserver(mutations => {
            if (document.querySelector(selector)) {
                resolve(document.querySelector(selector));
                observer.disconnect();
            }
        });

        observer.observe(documentArea, {
            childList: true,
            subtree: true
        });
    });
}




export default plugin;