function courses() {
    let mainUrl = 'http://localhost:3030/jsonstore/tasks/'
    const loadBtn = document.getElementById('load-course')
    const addBtn = document.getElementById('add-course')
    const editBtn = document.getElementById('edit-course')
    const list = document.getElementById('list')

    const titleInput = document.getElementById('course-name')
    const typeInput = document.getElementById('course-type')
    const descriptionInput = document.getElementById('description')
    const teacherInput = document.getElementById('teacher-name')

    loadBtn.addEventListener("click", loadAll)
    addBtn.addEventListener("click", add)

    function loadAll(loadEvent) {
        if (loadEvent) {
            loadEvent.preventDefault()
        }

        list.innerHTML = ''
        fetch(mainUrl)
            .then((res) => res.json())
            .then((data) => {
                let all_courses = Object.values(data)

                for (const course of all_courses) {
                    let containerDiv = document.createElement('div')
                    containerDiv.id = course._id
                    containerDiv.classList.add('container')
                    list.appendChild(containerDiv)

                    let titleHeader = document.createElement('h2')
                    titleHeader.textContent = course.title
                    containerDiv.appendChild(titleHeader)

                    let teacherHeader = document.createElement('h3')
                    teacherHeader.textContent = course.teacher
                    containerDiv.appendChild(teacherHeader)

                    let typeHeader = document.createElement('h3')
                    typeHeader.textContent = course.type
                    containerDiv.appendChild(typeHeader)

                    let descriptionHeader = document.createElement('h4')
                    descriptionHeader.textContent = course.description
                    containerDiv.appendChild(descriptionHeader)

                    let editBtn = document.createElement('button')
                    editBtn.textContent = 'Edit Course'
                    editBtn.classList.add('edit-btn')
                    editBtn.addEventListener("click", edit)
                    containerDiv.appendChild(editBtn)

                    let finishBtn = document.createElement('button')
                    finishBtn.textContent = 'Finish Course'
                    finishBtn.classList.add('finish-btn')
                    finishBtn.addEventListener("click", finish)
                    containerDiv.appendChild(finishBtn)
                }
            })
    }

    function add(addEvent) {
        addEvent.preventDefault()
        let title = titleInput.value
        let type = typeInput.value
        let description = descriptionInput.value
        let teacher = teacherInput.value

        let add = {
            method: "POST",
            body: JSON.stringify({title, type, description, teacher})
        }

        fetch(mainUrl, add)
            .then(() => {
                loadAll()
            })
        titleInput.value = ''
        typeInput.value = ''
        descriptionInput.value = ''
        teacherInput.value = ''
    }

    function edit(editEvent) {
        editEvent.preventDefault()
        let myContainer = editEvent.currentTarget.parentElement
        let myId = myContainer.id
        let myUrl = `${mainUrl}${myId}`
        let childrenArr = Array.from(myContainer.children)
        let title = childrenArr[0].textContent
        let teacher = childrenArr[1].textContent
        let type = childrenArr[2].textContent
        let description = childrenArr[3].textContent

        titleInput.value = title
        typeInput.value = type
        descriptionInput.value = description
        teacherInput.value = teacher

        addBtn.disabled = true
        editBtn.disabled = false

        editBtn.addEventListener("click", () => {

            let updateHeaders = {
                method: 'PUT',
                body: JSON.stringify({title: teacherInput.value,
                    type: typeInput.value,
                    description: descriptionInput.value,
                    teacher: teacherInput.value})
            }
            fetch(myUrl, updateHeaders)
                .then(() => {
                    loadAll()
                })

            addBtn.disabled = false
            editBtn.disabled = true
        })
    }

    function finish(finishEvent) {
        let finishId = finishEvent.currentTarget.parentElement.id
        let finishUrl = `${mainUrl}${finishId}`

        let deleteHeaders = {
            method: "DELETE"
        }

        fetch(finishUrl, deleteHeaders)
            .then(() => {
                loadAll()
            })
    }
}

courses()