import config from "@/utils/config.json";

export async function displayId(userId: number) {
    const statsCard = document.getElementById('user-stats-card');
    if (!statsCard) return; // ? Incase the user is blocked, which means the stats card won't be present

    const row = document.createElement('div');
    row.classList.add('mb-1');
    row.innerHTML = `
    <b>
        <i class="fa fa-hashtag text-center d-inline-block" style="width:1.3em"></i>
        Player ID
    </b>
    <span class="float-end">
        ${userId}
        <a id="copy" href="#copy">
            <i class="fad fa-copy" style="margin-left: 5px;"></i>
        </a>
    </span>
    `;

    const copyBtn = row.getElementsByTagName('a')[0];
    copyBtn.addEventListener('click', () => {
        navigator.clipboard.writeText(userId as unknown as string)
            .then(() => {
                const icon: HTMLElement = copyBtn.children[0] as HTMLElement;
                copyBtn.classList.add('text-success');
                icon.setAttribute('class', 'fa-duotone fa-circle-check');
                icon.style.marginLeft = '3px';

                setTimeout(() => {
                    copyBtn.classList.remove('text-success');
                    icon.setAttribute('class', 'fad fa-copy');
                    icon.style.marginLeft = '5px';
                }, 1500);
            })
            .catch(() => {
                alert('Failure to copy user ID to clipboard.');
            });
    });

    statsCard.children[0].insertBefore(row, statsCard.querySelector('.mb-1:has(.fa-calendar)')!);
};