enum Callout
{
    AT_RISK = "AT_RISK",
    STUDY_SUPPORT = "STUDY_SUPPORT",
    MEDICAL_CONDITION = "MEDICAL_CONDITION",
    TEACHING_IMPLICATIONS = "TEACHING_IMPLICATIONS",
}
const CalloutInfo = {
    [Callout.AT_RISK]: {icon: "P/exclamation-red-frame.png", title: "At Risk"},
    [Callout.STUDY_SUPPORT]: {icon: "P/information-shield.png", title: "Receives Study Support"},
    [Callout.MEDICAL_CONDITION]: {icon: "P/plus-shield.png", title: "Identified Medical Condition"},
    [Callout.TEACHING_IMPLICATIONS]: {icon: "P/shield--pencil.png", title: "Implications for Teaching"},
} as const;

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

    public connectedCallback(): void
    {
        // todo 122033-mini-profile Build thumbnail in js directly.
        // todo Fetch / API driven option, cached, for loading MiniProfile data? Simplifies usage.
        const name = this.getAttribute('name') || 'Unknown';
        const reference = this.getAttribute('reference') || 'N/A';
        const pronouns = this.getAttribute('pronouns') || '';
        const photoUrl = this.getAttribute('photo-url') || '';
        const profileUrl = this.getAttribute('profile-url') || '';

        const tooltipHtml = `
            <div class="mini-profile align-items-center">
                <img src="${photoUrl}" alt="Profile Photo" class="img-fluid photo"/>
                <div>
                    <p class="name">${name}</p>
                    <p class="reference">${reference}</p>
                    <p class="pronouns">${pronouns}</p>
                    ${this.getCalloutHtml()}
                </div>
            </div>
        `;

        const anchor = document.createElement('a');
        anchor.textContent = reference;
        anchor.href = profileUrl;
        anchor.target = '_blank';
        this.appendChild(anchor);

        this.tippyInstance = window.tippy(anchor, {
            content: tooltipHtml,
            allowHTML: true,
            interactive: true,
            theme: 'light',
            placement: 'top',
            zIndex: 9999,
            delay: [200, 150], // 500ms delay for showing, no delay for hiding
            popperOptions: {
                strategy: 'fixed',
            },
        });
    }

    private getCalloutHtml(): string
    {
        const calloutArr = this.getAttribute('callout-csv')?.split(',') || [];
        if (calloutArr.length === 0) {
            return '';
        }
        let html = '<div class="callout-wrapper">';
        for (let str of calloutArr) {
            if (str in CalloutInfo) {
                let {icon, title} = CalloutInfo[str];
                // todo Avoid direct reference to icon static url.
                html += `
                    <div>
                        <img class="ops_iconTag icon" src="/Static/Icons/${icon}" alt="${title}" title="${title}"/>
                        <span>${title}</span>
                    </div>
                `;
            }
        }
        html += '</div>';
        return html;
    }

    public disconnectedCallback(): void
    {
        if (this.tippyInstance) {
            this.tippyInstance.destroy();
            this.tippyInstance = null;
        }
        this.querySelector('a')?.remove();
    }
}
