let pokemonTypes = {};
let trainers = {};
let tableParentId = 'table';
let detailsParentId = 'details';


function getRowId(resource) {
    return `${resource.id}_row`
}

function updateDetailsPokemon(pokemonTypeId) {
    const pt = pokemonTypes?.data?.find(item => item.id === pokemonTypeId);
    const parent = document.getElementById(detailsParentId);

    parent.innerHTML = `
    <div class="card" id="${pt.id}_card">
      <img src="${pt.imgUrl}" class="card-img-top" alt="${pt.classification}">
      <div class="card-body">
        <h5 class="card-title">${pt.name} #${pt.pokedexNumber}</h5>
        <p class="card-text">
            Japanese name: ${pt.japaneseName} </br>
            Classification: ${pt.classification} </br>
            Abilities: ${pt.abilities?.join(", ") || "none"} </br>
            Type: ${pt.primaryType}${pt.secondaryType ? " , " + pt.secondaryType : ""}
        </p>
      </div>
    </div>
    `
}
function updateDetailsTrainer(TrainerID) {
    const tr = trainers?.data?.find(item => item.id === TrainerID);
    const parent = document.getElementById(detailsParentId);

    parent.innerHTML = `
    <div class="card" id="${tr.id}_card">
      <img src="${tr.profileUrl}" class="card-img-top" alt="${tr.created}">
      <div class="card-body">
        <h5 class="card-title">${tr.name} #${tr.id}</h5>
        <p class="card-text">
            createdDate: ${tr.created} </br>
            LastUpDate: ${tr.lastUpDate} </br>
            profileURL: ${tr.profileUrl} </br>
        </p>
      </div>
    </div>
    `
}

function pokemonTypeToRow(pokemonType) {
    return `
    <tr id="${getRowId(pokemonType)}" onclick="updateDetailsPokemon('${pokemonType?.id?.trim()}')">
        <th scope="row">${pokemonType.id}</th>
        <td>${pokemonType.name}</td>
        <td>#${pokemonType.pokedexNumber}</td>
        <td>${pokemonType.primaryType}</td>
        <td>${pokemonType.secondaryType || '-'}</td>
    </tr>
    `
}
function TrainerToRow(trainer) {
    return `
    <tr id="${getRowId(trainer)}" onclick="updateDetailsTrainer('${trainer?.id?.trim()}')">
        <th scope="row">${trainer.id}</th>
        <td>${trainer.name}</td>
        <td>${trainer.created}</td>
        <td>${trainer.lastUpDate}</td>
    </tr>
    `
}
function createPokemonTypesTable() {
    const tableParent = document.getElementById(tableParentId);
    tableParent.innerHTML = `
        <table class="table table-striped table-hover">
            <thead>
                <tr>
                    <th scope="col">ID</th>
                    <th scope="col">Name</th>
                    <th scope="col">Pokedex Number</th>
                    <th scope="col">Primary Type</th>
                    <th scope="col">Secondary Type</th>
                </tr>
            </thead>
            <tbody>
                ${
        pokemonTypes.data.map(resource => `${pokemonTypeToRow(resource)}`).join("\n")
        || "no data"
    }
            </tbody>
        </table>
    `
}
    function createTrainerTable() {
        const tableParent = document.getElementById(tableParentId);
        tableParent.innerHTML = `
        <table class="table table-striped table-hover">
            <thead>
                <tr>
                    <th scope="col">ID</th>
                    <th scope="col">Name</th>
                    <th scope="col">created</th>
                    <th scope="col">lastUpDate</th>
                    <th scope="col">profileURL</th>
                </tr>
            </thead>
            <tbody>
                ${
            trainers.data.map(resource => `${TrainerToRow(resource)}`).join("\n")
            || "no data"
        }
            </tbody>
        </table>
    `
}
// function addTrainer() {
//     // Retrieve trainer details from the form
//     var trainerName = document.getElementById("trainerName").value;
//     var trainerID = document.getElementById("trainerID").value;
//
//     // Create a new row in the table with the trainer details
//     var newRow = "<tr><td>" + trainerName + "</td><td>" + trainerID + "</td></tr>";
//     document.getElementById("tableDiv").innerHTML += newRow;
//
//     // Clear the form fields
//     document.getElementById("trainerName").value = "";
//     document.getElementById("trainerID").value = "";
//
//     // Close the modal
//     $('#addTrainerModal').modal('hide');
// }