// 定义枚举
export enum TipAdornerPlacement {
    Bottom,
    Right,
}

// 定义 TipAdorner 类
export class TipAdorner {
    private messageHost: HTMLElement;
    private adornedElement: HTMLElement;
    private adornerLayer: HTMLElement;
    private message: string;
    private messageTemplate: string | null = null;
    private placement: TipAdornerPlacement = TipAdornerPlacement.Bottom;

    constructor(adornedElement: HTMLElement, adornerLayer: HTMLElement) {
        this.adornedElement = adornedElement;
        this.adornerLayer = adornerLayer;
        this.messageHost = document.createElement('div');
        this.adornerLayer.appendChild(this.messageHost);
    }

    public set Message(value: string) {
        this.message = value;
        this.messageHost.textContent = value;
    }

    public get Message(): string {
        return this.message;
    }

    public set MessageTemplate(value: string | null) {
        this.messageTemplate = value;
        if (value) {
            this.messageHost.innerHTML = value;
        }
    }

    public get MessageTemplate(): string | null {
        return this.messageTemplate;
    }

    public set Placement(value: TipAdornerPlacement) {
        this.placement = value;
        this.arrange();
    }

    public get Placement(): TipAdornerPlacement {
        return this.placement;
    }

    private arrange() {
        const adornedRect = this.adornedElement.getBoundingClientRect();
        const messageHostRect = this.messageHost.getBoundingClientRect();

        let x = 0;
        let y = 0;

        if (this.placement === TipAdornerPlacement.Right) {
            x = adornedRect.right;
            y = adornedRect.top;
        } else {
            x = adornedRect.left;
            y = adornedRect.bottom;
        }

        this.messageHost.style.position = 'absolute';
        this.messageHost.style.left = `${x}px`;
        this.messageHost.style.top = `${y}px`;
    }
}