function LoadData(data) {
    const objects = JSON.parse(data).cards;
    for (i of objects) {
        CreateFace(i);
        CreateBack(i);
    }
}

function acceptFile() {
    const inp = document.getElementById("inp");
    console.log(inp.files[0]);
    readFileContent(inp.files[0]).then(content => {
        LoadData(content);
    });
}

function readFileContent(file) {
	const reader = new FileReader()
  return new Promise((resolve, reject) => {
    reader.onload = event => resolve(event.target.result)
    reader.onerror = error => reject(error)
    reader.readAsText(file)
  })
}

function CreateFace(card) {
    let parent = document.getElementById("row");
    const template = document.getElementById("FaceTempl");
    var clone = template.content.cloneNode(true);

    console.log(card);
    clone.getElementById("classname").innerHTML = GetClassDisplayName(card.ClassName);
    clone.getElementById("level").innerHTML = card.Level;
    clone.getElementById("spellName").innerHTML = card.SpellName;
    clone.getElementById("school").innerHTML = card.School;
    clone.getElementById("castTime").innerHTML = card.CastTime;
    clone.getElementById("distance").innerHTML = card.Distance;
    clone.getElementById("components").innerHTML = card.Components;
    clone.getElementById("duration").innerHTML = card.Duration;

    parent.appendChild(clone);
}

function CreateBack(card) {
    let parent = document.getElementById("row");
    const template = document.getElementById("BackTempl");
    var clone = template.content.cloneNode(true);
    var container = clone.getElementById("description");
    for (i of card.Description) {
        var newText = document.createElement("p");
        newText.innerHTML = i;
        newText.style.fontSize = `${card.DescriptionScale}px`;
        container.appendChild(newText);
    }
    parent.appendChild(clone);
}

function GetClassDisplayName(baseClass) {
    switch (baseClass) {
        case "bard": return "Бард";
    }
    return "";
}