import { RhamtConfiguration, rhamtEvents } from 'raas-core';
import { WebviewPanel, window, ViewColumn, Uri, ExtensionContext, Disposable } from 'vscode';
import * as path from 'path';
import { Endpoint } from '../server/endpoint';

export class ConfigurationEditor implements Disposable {

    onEditorClosed = new rhamtEvents.TypedEvent<void>();

    private configuration: RhamtConfiguration;
    private view: WebviewPanel | undefined = undefined;
    private endpoint: Endpoint;
    private context: ExtensionContext;

    constructor(configuration: RhamtConfiguration, endpoint: Endpoint, context: ExtensionContext) {
        this.configuration = configuration;
        this.endpoint = endpoint;
        this.context = context;
        this.context.subscriptions.push(this);

        // TODO: Move this to an area for setting default values when configuration created.
        this.configuration.server.host = endpoint.raasHost;
        this.configuration.server.port = Number(endpoint.raasPort);
    }

    open(): void {
        if (!this.view) {
            this.view = window.createWebviewPanel('rhamtEditor', this.configuration.name, ViewColumn.Active, {
                enableScripts: true,
                retainContextWhenHidden: true,
                localResourceRoots: [Uri.file(path.join(this.context.extensionPath, 'out'))]
            });
            this.view.onDidDispose(() => {
                this.view = undefined;
                this.onEditorClosed.emit(undefined);
            });
            this.view.webview.html = this.render();
        }
        this.view.reveal();
    }

    dispose(): void {
    }

    render(): string {
        return this.renderBody();
    }

    private renderBody(): string {
        const html = `
            <!DOCTYPE html>
            <html>
                <body style="margin:0px;padding:0px;overflow:hidden">
                    <iframe src="http://${this.endpoint.location}/${this.configuration.id}"
                        frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe>
                </body>
            </html>
        `;
        return html;
    }
}