import * as vscode from 'vscode';
import { join } from 'path';

const catCounterViewType = 'catCounter';

export function activate(context: vscode.ExtensionContext) {
    const cat = vscode.Uri.file(join(context.extensionPath,'media', 'cat.gif')).with({ scheme: 'vscode-resource' })

    let panel: any;

    let disposable = vscode.commands.registerCommand('cat.startCounting', () => {
        if (!panel) {
            panel = (vscode.window as any).createWebviewPanel(catCounterViewType, 'Cat Counter', vscode.ViewColumn.Three, { });
        }
        panel.reveal(vscode.ViewColumn.Three);
        panel.webview.html = contentFor(cat, 0);
    });

    context.subscriptions.push(disposable);
}

function contentFor(cat: vscode.Uri, count: number) {
    return `
        <img src="${cat}" width="200" />
        <b id='counter' style="font-family: 'Comic Sans MS'; font-size: 96px; color: hotpink;"></b>

        <script>
            const counter = document.getElementById('counter');
            let count = ${count};

            setInterval(() => {
                const c = count++
                counter.innerText = c;
                window.parent.postMessage({ count: c }, '*');
            }, 100)
        </script>`;
}