const userContainer = document.getElementById('list-of-users')

var array = [
    {
        name: "Leonid",
        lastname: "Petrovic",
        email: "lenistruktura@live.com",
        personalID: "0112985730043"
    },
    {
        name: "Milan",
        lastname: "Jankovic",
        email: "milansamopartizan@live.com",
        personalID: "1210997730012"
    },
    {
        name: "Lola",
        lastname: "Medvedev",
        email: "trcilolatrci@hotmail.com",
        personalID: "1112997910023"
    },
    {
        name: "Aleksandra",
        lastname: "Rajevski",
        email: "anakarenina@live.com",
        personalID: "0503999882912"
    },
    {
        name: "Ahmed",
        lastname: "Nurudin",
        email: "dervisismrt@gmail.com",
        personalID: "1705992901231"
    },
    {
        name: "Svetlana",
        lastname: "Raznatovic",
        email: "didule@live.com",
        personalID: "1406973891321"
    }
]

//MODEL
function addUser(user, list, appendingID) {
    list.push(user)
    printUsers(list, appendingID)
}

function removeUser(list, id) {
    list.slice(list.find(item => item.personalID == id), 1)
    printUsers(list, appendingID)
}
//END MODEL

//VIEW
function printUsers(list, appendingID) {
    while (appendingID.firstChild) {
        appendingID.removeChild(appendingID.firstChild)
    }
    console.log("obrisao sam")
    if (list.length == 0)
        appendEmptyDiv(appendingID)
    else {
        console.log("sad stampam")
        list.map(user => displayUsers(appendingID, user))
    }
}

function displayUsers(appendingID, user) {
    var wholeDiv = document.createElement('div')
    wholeDiv.setAttribute('id', 'wholeDiv')
    const nameDiv = creatingDiv('Ime: ', user.name)
    const lastnameDiv = creatingDiv('Prezime: ', user.lastname)
    const mailDiv = creatingDiv('E-mail: ', user.email)
    const idDiv = creatingDiv('ID:  ', user.personalID)
    wholeDiv.appendChild(nameDiv)
    wholeDiv.appendChild(lastnameDiv)
    wholeDiv.appendChild(mailDiv)
    wholeDiv.appendChild(idDiv)
    appendingID.appendChild(wholeDiv)
}

function creatingDiv(title, data) {
    var newDiv = document.createElement('div')
    //newDiv.setAttribute("id", title + data);
    var titleSpan = document.createElement('span')
    titleSpan.textContent = title + '  '
    newDiv.appendChild(titleSpan)
    var contentDiv = document.createElement('span')
    contentDiv.textContent = data
    newDiv.appendChild(contentDiv)
    return newDiv
}

function appendEmptyDiv(appendingID) {
    const emptyDiv = document.createElement('div')
    emptyDiv.textContent = 'Nema korisnika, unesite korisnika iznad.'
    appendingID.appendChild(emptyDiv)
}

// END VIEW

printUsers(array, userContainer)


//CONTROL
function newUser() {
const firstForm = document.getElementById('newUser')
firstForm.addEventListener('submit', event => {
    event.preventDefault()
    userName = document.getElementById('name').value
    document.getElementById('name').value = ""
    userLastname = document.getElementById('lastname').value
    document.getElementById('lastname').value = ""
    userEmail = document.getElementById('email').value
    document.getElementById('email').value = ""
    userPersonalID = document.getElementById('personalID').value
    document.getElementById('personalID').value = ""
    var newUser = {
        name: userName,
        lastname: userLastname,
        email: userEmail,
        personalID: userPersonalID
    }
    addUser(newUser, array, userContainer)
})
}

//END CONTROL