artemkorsakov_project-euler-stats/helpers/progressBlock.ts

import { AccountData, CacheData, ProgressData, RatingData } from './types';
import { createProgressBar, createSectionHeader } from './commonBlocks';

function createTableRow(label: string | HTMLElement, status: string, progressBar?: HTMLElement): HTMLElement {
    const row = document.createElement('tr');
    const labelCell = document.createElement('td');
    const statusCell = document.createElement('td');
    const progressCell = document.createElement('td');

    // If label is a string, set the text content directly
    if (typeof label === 'string') {
        labelCell.textContent = label;
    } else { // If label is an HTMLElement, append it to the cell
        labelCell.appendChild(label);
    }

    statusCell.textContent = status;

    if (progressBar) {
        progressCell.appendChild(progressBar);
    }

    row.appendChild(labelCell);
    row.appendChild(statusCell);
    row.appendChild(progressCell);
    return row;
}

function createProgressTable(
	progressData: ProgressData,
    euleriansPlace: string,
    locationUrl: string,
    languageUrl: string,
    accountData: AccountData,
    locationRating: RatingData,
    languageRating: RatingData
): HTMLElement {
    const table = document.createElement('table');
    const tableBody = document.createElement('tbody');

    const headerRow = document.createElement('tr');
    ['Competition', 'Status', 'Progress bar'].forEach(headerText => {
        const headerCell = document.createElement('th');
        headerCell.textContent = headerText;
        headerRow.appendChild(headerCell);
    });
    tableBody.appendChild(headerRow);

    // Solved out of total
    const progressPercentage = createProgressBar(progressData.percentage);
    tableBody.appendChild(createTableRow(
        `Progress`,
        progressData.progress,
        progressPercentage
    ));

    // Eulerians' place
    const euleriansLink = document.createElement('a');
    euleriansLink.href = 'https://projecteuler.net/eulerians';
    euleriansLink.textContent = 'Place in Eulerians';
    tableBody.appendChild(createTableRow(
        euleriansLink,
        euleriansPlace
    ));

    // Location rating
    const locationPlace = locationRating.place > 100 ? 'You are not in the top 100' : locationRating.place.toString();
    const locationPlaceToTop = locationRating.place > 100 ? 0 : 100 - locationRating.place;
    const locationPercentage = createProgressBar(locationPlaceToTop);
    const locationLink = document.createElement('a');
    locationLink.href = locationUrl;
    locationLink.textContent = `Place in ${accountData.location}`;
    tableBody.appendChild(createTableRow(
        locationLink,
        locationPlace,
        locationPercentage
    ));

    // Language rating
    const languagePlace = languageRating.place > 100 ? 'You are not in the top 100' : languageRating.place.toString();
    const languagePlaceToTop = languageRating.place > 100 ? 0 : 100 - languageRating.place;
    const languagePercentage = createProgressBar(languagePlaceToTop);
    const languageLink = document.createElement('a');
    languageLink.href = languageUrl;
    languageLink.textContent = `Place in ${accountData.language}`;
    tableBody.appendChild(createTableRow(
        languageLink,
        languagePlace,
        languagePercentage
    ));

    table.appendChild(tableBody);
    return table;
}


/**
 * Generates HTML for the progress table.
 * @param cache - The cache data.
 * @returns The generated HTMLElement (progress table container).
 */
export function generateProgressTableHTML(cache: CacheData, useShortFormat: boolean): HTMLElement {
    const progressContainer = document.createElement('div');
    progressContainer.appendChild(createSectionHeader('Progress'));
    if (!useShortFormat) {
        progressContainer.appendChild(createProgressBar(cache.progressData.percentage));
	}
    progressContainer.appendChild(createProgressTable(
		cache.progressData,
        cache.euleriansPlace,
        cache.locationUrl,
        cache.languageUrl,
        cache.accountData,
        cache.locationRating,
        cache.languageRating
    ));
    return progressContainer;
}