function create_div(id_name, class_name) {
    var col_div = document.createElement("div")
    if (class_name != "")
        col_div.setAttribute("class", class_name)
    if (id_name != "")
        col_div.setAttribute("id", id_name)
    return col_div
}

function create_dataframe(df, id) {
    var tb = document.createElement('table');
    tb.innerHTML = df.trim();
    tb.setAttribute("id", id);
    tb.setAttribute("class", "table table-bordered")
    return tb
}

function create_selection(features_list, id, value_array = [], default_feature = "") {

    //Create array of options to be added
    var array = features_list;

    //Create and append select list
    var selectList = document.createElement("select");
    selectList.setAttribute("class", "col mr-2 selectpicker form-control")
    selectList.id = id;

    var array_to_use = []
    if (value_array != null) {
        array_to_use = value_array;
    } else {
        array_to_use = array;
    }

    //Create and append the options
    for (var i = 0; i < array.length; i++) {
        var option = document.createElement("option");
        option.value = array_to_use[i]
        option.text = array[i];
        selectList.appendChild(option);
    }

    if (default_feature != "") {
        selectList.value = default_feature
    }

    return selectList
}

// Function to transpose the table
function transpose_table(tableHtml) {
    // Convert the HTML string into a jQuery object for manipulation
    const originalTable = $(tableHtml);
    console.log(tableHtml)
    // Get the column names (th elements in the header row)
    const colNames = originalTable.find('thead th').map(function () {
        return $(this).text().trim();
    }).get();

    // Get the data rows (as an array of arrays of values)
    const rows = originalTable.find('tbody').map(function () {
        return $(this).find('td').map(function () {
            return $(this).text().trim();
        }).get();
    }).get();  // We use get() twice to fully extract values as a 2D array


    const rowsNum = originalTable.find('tbody tr').length;

    // Build the new transposed table
    let transposedHtml = '<table border="1" class="dataframe"><thead><tr style="text-align: right;"><th>Feature</th>';

    // Add headers for the values (assuming each row represents an entry)
    transposedHtml += `<th>Original Value</th>`;
    if (rowsNum >= 2)
        transposedHtml += `<th>Counterfactual Value</th>`;
    transposedHtml += '</tr></thead><tbody>';

    // Create rows for each column (i.e., each feature name becomes a row)
    if (rowsNum >= 2) {
        for (let colIndex = 0; colIndex < colNames.length; colIndex++) {
            transposedHtml += `<tr><td>${colNames[colIndex]}</td>`;
            transposedHtml += `<td>${rows[colIndex]}</td>`;
            transposedHtml += `<td>${rows[colIndex + colNames.length]}</td>`;
            transposedHtml += '</tr>';
        }
    } else {
        for (let colIndex = 0; colIndex < colNames.length; colIndex++) {
            transposedHtml += `<tr><td>${colNames[colIndex]}</td>`;
            transposedHtml += `<td>${rows[colIndex]}</td>`;
            transposedHtml += '</tr>';
        }
    }

    transposedHtml += '</tbody></table>';

    // Return the transposed table as an HTML string
    return transposedHtml;
}

function create_uploaded_file_radio(dfName, counter, isChecked = false) {
    // Create the main container div
    const formCheckDiv = document.createElement("div");
    formCheckDiv.className = "form-check mb-2 d-flex align-items-start";

    // Create the radio input element
    const radioInput = document.createElement("input");
    radioInput.className = "form-check-input mr-2";
    radioInput.type = "radio";
    radioInput.name = "uploaded_file";
    radioInput.id = `element_${counter}`;
    radioInput.value = dfName;
    radioInput.required = true;
    if (isChecked) {
        radioInput.checked = true;
    }

    // Create the label element
    const label = document.createElement("label");
    label.className = "form-check-label mr-auto text-break"; // Matches static HTML classes
    label.htmlFor = `element_${counter}`;
    label.textContent = dfName;

    // Create the delete button
    const deleteButton = document.createElement("button");
    deleteButton.className = "delete-file-icon p-0 ml-2 text-muted close align-self-start";
    deleteButton.type = "button";
    deleteButton.dataset.file = dfName;
    deleteButton.setAttribute("aria-label", `Delete ${dfName}`);

    // Create the '×' span inside the delete button
    const deleteIcon = document.createElement("span");
    deleteIcon.setAttribute("aria-hidden", "true");
    deleteIcon.innerHTML = "&times;";

    // Append the delete icon to the delete button
    deleteButton.appendChild(deleteIcon);

    // Append the radio input, label, and delete button to the container div
    formCheckDiv.appendChild(radioInput);
    formCheckDiv.appendChild(label);
    formCheckDiv.appendChild(deleteButton);

    return formCheckDiv;
}


function showLoader(show, ids = ["#loader_ds", "#loader_stats"]) {
    ids.forEach(id => {
        $(id).toggle(show);
    });
}
function resetContainers(ids = [
    "#df_container",
    "#stats_container",
    "#figs",
    "#df",
    "#df_stats",
    "#df_cached",
    "#df_stats_cached",
    "#ts_confidence_cached",
    "#ts_stats_cached",
    "#ts_confidence",
    "#ts_stats"
]) {
    ids.forEach(id => {
        $(id).hide();
    });
}

function clearPreviousContent(ids = [
    "#df_container",
    "#stats_container",
    "#pretrained_radio",
    "#feature1",
    "#feature2",
    "#label",
    "#ts_confidence_container",
    "#ts_stats_container"
]) {
    ids.forEach(id => {
        const element = document.querySelector(id);
        if (element) element.remove();
    });
}

function initializeAlertCloseHandlers() {
    document.querySelectorAll('.alert .close').forEach(button => {
        button.addEventListener('click', function () {
            const alertElement = button.closest('.alert');
            if (alertElement) {
                alertElement.style.display = 'none'; // Hide the alert
            }
        });
    });
}

function showError(message, id) {
    $(`#${id}`).show();
    console.log(document.getElementById(id))
    if (message) {
        $(`#${id}`).html(` <button type="button" class="close close-alert ml-auto p-0" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button> <i class="fas fa-exclamation-triangle"></i> ${message}`);
    } else {
        $(`#${id}`).html('Error');
    }
    initializeAlertCloseHandlers();
}

function showSuccess(message, id) {
    $(`#${id}`).show();
    if (message) {
        $(`#${id}`).html(`<button type="button" class="close close-alert ml-auto p-0" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button><i class="fas fa-check-circle"></i> ${message}`);
    } else {
        $(`#${id}`).html('Error');
    }
    initializeAlertCloseHandlers();
}

function showElement(elementId) {
    $(elementId).show();
}

function hideElement(elementId) {
    $(elementId).hide();
}

function openModal(modal) {
    // Show the modal
    modal.classList.add('show');
    modal.style.display = 'block';

    // Add the modal-open class to the body
    document.body.classList.add('modal-open');

    // Create and show the backdrop
    const backdrop = document.createElement('div');
    backdrop.className = 'modal-backdrop fade show';
    document.body.appendChild(backdrop);
}

function closeModal(modal) {
    // Hide the modal
    modal.classList.remove('show');
    modal.style.display = 'none';

    // Remove the modal-open class from the body
    document.body.classList.remove('modal-open');

    // Remove the backdrop
    const backdrop = document.querySelector('.modal-backdrop');
    if (backdrop) {
        backdrop.parentNode.removeChild(backdrop);
    }
}


function hideElements(selectors) {
    selectors.forEach(selector => document.querySelector(selector)?.style.setProperty('display', 'none'));
}

function showElements(selectors) {
    selectors.forEach(selector => document.querySelector(selector)?.style.removeProperty('display'));
}

function removeExistingElements(selectors) {
    selectors.forEach(selector => document.querySelector(selector)?.remove());
}

function appendToElement(selector, element) {
    document.querySelector(selector)?.appendChild(element);
}

export {
    create_selection,
    create_dataframe,
    create_div,
    transpose_table,
    create_uploaded_file_radio,
    showLoader,
    clearPreviousContent,
    resetContainers,
    showSuccess,
    showElement,
    hideElement,
    openModal,
    closeModal,
    hideElements,
    showElements,
    removeExistingElements,
    appendToElement,
    showError,
    initializeAlertCloseHandlers
}