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 GetClassData(baseName) {
    switch (baseName) {
        case "fighter": return {Color: "9E3A2F", Name: "Воин", Icon: "ClassIcons/figh.svg"};
        case "barbarian": return {Color: "905945", Name: "Варвар", Icon: "ClassIcons/barb.svg"};
        case "wizard": return {Color: "4265B8", Name: "Волшебник", Icon: "ClassIcons/wiza.svg"};
        case "bard": return {Color: "B15063", Name: "Бард", Icon: "ClassIcons/bard.svg"};
        case "paladin": return {Color: "94C6E3", Name: "Паладин", Icon: "ClassIcons/pala.svg"};
        case "cleric": return {Color: "ECCE65", Name: "Жрец", Icon: "ClassIcons/cler.svg"};
        case "warlock": return {Color: "8576C2", Name: "Колдун", Icon: "ClassIcons/warl.svg"};
        case "druid": return {Color: "5FB375", Name: "Друид", Icon: "ClassIcons/drui.svg"};
        case "sorcerer": return {Color: "8D578E", Name: "Чародей", Icon: "ClassIcons/sour.svg"};
        case "rouge": return {Color: "525247", Name: "Плут", Icon: "ClassIcons/roug.svg"};
        case "ranger": return {Color: "66B99E", Name: "Следопыт", Icon: "ClassIcons/rang.svg"};
        case "monk": return {Color: "AB8C4E", Name: "Монах", Icon: "ClassIcons/monk.svg"};
        case "focuse": return {Color: "B85812", Name: "Фокус", Icon: "ClassIcons/focu.svg"};
    }
}

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

    var classData = GetClassData(card.ClassName);

    clone.getElementById("classname").innerHTML = classData.Name;
    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;
    clone.getElementById("classIcon").src = classData.Icon;
    clone.getElementById("stats").innerHTML = `■ ${card.CastTime} ■ ${card.Distance} ■ ${card.Components} ■ ${card.Duration} ■`;
// ■


    clone.getElementById("level").style.backgroundImage = GetLevelBg(classData);

    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 GetLevelBg(classData) {
    return `url("data:image/svg+xml;utf8,<svg width='51' height='50' viewBox='0 0 51 50' fill='black' xmlns='http://www.w3.org/2000/svg'><path d='M14.8066 47.996H1V18.0191C1 12 4.5 6.28571 4.5 6.28571C4.5 6.28571 8.5 2 14.8066 1L50 0V6.28571V18.0191C50 22.1212 49.9853 25.6626 49.8804 28.7198C49.3596 43.8877 46.6158 47.1383 32.4103 47.8219C27.8345 48.0421 22.0695 47.996 14.8066 47.996Z' fill='%23${classData.Color}'/><path d='M1 46.496C1 47.496 1 48.496 1 49.496C3.99982 49.4479 6.99963 49.4032 9.99945 49.3621C11.6018 49.3401 13.2042 49.3191 14.8066 49.2991C20.6737 49.2118 26.5411 49.2502 32.4642 48.9438C37.4353 48.5062 43.4064 48.5842 47.3588 44.0262C50.8109 39.3266 50.5555 33.8043 50.8798 28.7541C50.8846 28.6154 50.8892 28.4745 50.8935 28.3357C50.9984 24.8841 50.9979 21.4504 51 18.0191C51 14.1274 51 10.2357 51 6.34406C51 6.32461 51 6.30516 51 6.28571C50.9998 4.19047 50.9863 2.09524 50.964 0L50.9745 -0.981414L49.9726 -0.963621C39.2113 -0.543122 28.4567 0.111937 17.6922 0.417804C16.7256 0.44527 15.7588 0.465591 14.7918 0.480421L14.7252 0.486625C10.7123 1.09076 6.95878 2.8896 3.89016 5.71653L3.78864 5.85001C2.57172 7.81213 1.63937 9.85477 0.945272 12.029C0.344129 13.9432 -0.0596529 15.9485 -0.0911342 18.0191C-0.196379 25.0115 -0.286152 32.004 -0.378432 38.9965C-0.41802 41.9963 -0.45807 44.9962 -0.5 47.996C0.5 47.996 1.5 47.996 2.5 47.996C2.45807 44.9962 2.41802 41.9963 2.37843 38.9965C2.28615 32.004 2.19638 25.0115 2.09113 18.0191C2.06302 16.2205 2.36355 14.3884 2.86211 12.5998C3.42905 10.582 4.23256 8.54264 5.21136 6.72142L5.10984 6.8549C7.63371 4.2137 11.1472 2.15682 14.888 1.51337L14.8213 1.51958C15.7876 1.47948 16.754 1.44487 17.7206 1.4174C28.4851 1.11153 39.2596 1.15486 50.0274 0.963621L49.036 0C49.0137 2.09524 49.0002 4.19048 49 6.28571C49 6.30516 49 6.32461 49 6.34406C49 10.2357 49 14.1274 49 18.0191C48.9979 21.4457 48.9981 24.869 48.8945 28.2731C48.8902 28.41 48.8856 28.5489 48.8809 28.6855C48.623 33.6353 48.5687 39.1038 45.761 42.7208C42.8243 46.2302 37.2547 46.4218 32.3563 46.7001C26.5547 46.9085 20.6781 46.7527 14.8066 46.6929C13.2042 46.6729 11.6018 46.6519 9.99945 46.6299C6.99963 46.5887 3.99982 46.5441 1 46.496ZM1 49.496V46.496L2.5 47.996H-0.5L-0.520626 49.4716L1 49.496Z' fill='black'/></svg>")`;
}