import { Color } from './highlighter/properties/color.js';
import { Span } from './highlighter/span.js';

export class Inspector {
    #element: HTMLDivElement;

    public constructor() {
        this.#element = document.createElement('div');
        this.#element.id = 'inspector';

        document.body.appendChild(this.#element);
        document.addEventListener('mousemove', event => this.#element.style.transform = `translate(${event.clientX + 10}px, ${event.clientY + 10}px)`);
    }

    public instrument(element: HTMLElement, spans: Array<Span>): void {
        if (spans.length === 0)
            return;

        const container = document.createElement('pre');

        container.textContent += spans[spans.length - 1].inspect(0);

        element.addEventListener('mouseenter', () => {
            element.style.background = Color.Comment.color;
            this.show(container);
        });

        element.addEventListener('mouseleave', () => {
            element.style.background = 'none';
            this.hide();
        });
    }

    public show(element: HTMLElement): void {
        this.#element.style.display = 'block';

        if (this.#element.children[0] !== element)
            this.#element.replaceChildren(element);
    }

    public hide(): void {
        this.#element.style.display = 'none';
    }

    public get element(): HTMLDivElement {
        return this.#element;
    }
}
