import '@kano/styles/typography.js';
import '@kano/styles/color.js';
import 'marked/lib/marked.js';
import { twemoji } from '@kano/twemoji/index.es.js';
import { html, render } from 'lit-html/lit-html.js';
import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
export class Tooltip {
    constructor() {
        this.domNode = null;
        this.markedEl = null;
        this.contentNode = null;
    }
    render(markdown) {
        return html `
            <style>
                .markdown-html {
                    padding: 0px 16px;
                    max-width: 260px;
                    text-align: left;
                    line-height: 1.2;
                    color: var(--color-black);
                }
            </style>
            <div class="markdown-html">${unsafeHTML(markdown)}</div>
        `;
    }
    update(markdown) {
        const tpl = this.render(markdown);
        render(tpl, this.getDomNode());
    }
    getDomNode() {
        if (!this.domNode) {
            this.domNode = document.createElement('kano-tooltip');
            this.domNode.caret = 'start';
            this.domNode.style.setProperty('--kano-tooltip-border-color', 'var(--color-abbey)');
            this.domNode.style.color = 'black';
            this.domNode.style.fontFamily = 'var(--font-body)';
            this.domNode.style.fontWeight = 'normal';
        }
        return this.domNode;
    }
    getTextNode() {
        return this.getDomNode().getElementsByClassName('markdown-html')[0].getElementsByTagName('p')[0];
    }
    setCaret(caret) {
        const domNode = this.getDomNode();
        domNode.caret = caret;
    }
    setText(text) {
        const emojiReady = twemoji.parse(text);
        this.update(window.marked(emojiReady));
    }
    setPosition(position) {
        const marked = this.getDomNode();
        marked.position = position;
    }
    setOffset(offset) {
        const domNode = this.getDomNode();
        domNode.offset = offset;
    }
    setTarget(target) {
        const domNode = this.getDomNode();
        domNode.target = target;
    }
    layout() {
        const domNode = this.getDomNode();
        domNode.updatePosition(false);
        // TODO: This is to make sure all tooltips appear over dialogs.
        // The editor should have a stacking order manager to handle all this
        domNode.style.zIndex = '200000';
    }
    getPosition() {
        return null;
    }
    close() {
        const domNode = this.getDomNode();
        domNode.close();
        return new Promise((resolve) => {
            setTimeout(resolve, 150);
        });
    }
    dispose() {
    }
}
//# sourceMappingURL=tooltip.js.map