export class RichTooltip extends HTMLElement
{
    private tippyInstance: any = null;

    public connectedCallback(): void
    {
        const name = this.getAttribute('name') || 'Unknown';
        const referenceCode = this.getAttribute('reference-code') || 'N/A';
        const disabilityInfo = this.getAttribute('disability-info') || 'None';
        const photo = this.getAttribute('photo') || '';

        const tooltipContent = `
            <div style="display: flex; align-items: center; gap: 10px; padding: 10px; font-family: Arial, sans-serif;">
                <img src="${photo}" alt="Profile Photo" style="width: 50px; height: 50px; border-radius: 50%; object-fit: cover;" />
                <div>
                    <div><strong>Name:</strong> ${name}</div>
                    <div><strong>Reference Code:</strong> ${referenceCode}</div>
                    <div><strong>Disability Info:</strong> ${disabilityInfo}</div>
                </div>
            </div>
        `;

        const anchor = document.createElement('a');
        anchor.textContent = 'Hover for details yez';
        this.appendChild(anchor);

        this.tippyInstance = window.tippy(anchor, {
            content: tooltipContent,
            allowHTML: true,
            interactive: true,
            theme: 'light',
            placement: 'top',
            zIndex: 9999,
            popperOptions: {
                strategy: 'fixed',
            },
        });
    }

    public disconnectedCallback(): void
    {
        if (this.tippyInstance) {
            this.tippyInstance.destroy();
        }
    }
}
