async function publish_comment(id) {
    var csrf
    document.querySelector('.add-comment').querySelectorAll('input,textarea').forEach(input => {
        if (input.name == 'csrfmiddlewaretoken') {
            csrf = input.value.trim()
        }
    })
    var data = {
        "comment": id
    }
    return fetch("/comment/publish/", {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRFToken': csrf
        },
        body: JSON.stringify(data)
    }).then(response => {
        return response.json()
    })
}

async function login(username, password) {
    var csrf
    document.querySelector('.add-comment').querySelectorAll('input,textarea').forEach(input => {
        if (input.name == 'csrfmiddlewaretoken') {
            csrf = input.value.trim()
        }
    })
    var data = {
        "username": username,
        "password": password,
    }
    return fetch("/login/", {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRFToken': csrf
        },
        body: JSON.stringify(data)
    }).then(response => {
        return response.json()
    })
}

function renderComments(cdiv, data) {
        cdiv.innerHTML = `
            <h3>
                <span class="icon">${icon.down}</span>
                Comments
            </h3>
            <div class="block">
                <div class="comments-content">
                </div>
            </div>
        `
        const content = cdiv.querySelector('.comments-content')
        comments.forEach(comment => {
            var extra = ''
            if (!comment.published) {
                if (user.is_moderator) {
                    extra += `<button class="publish-comment">${icon.publishComment}</button>`
                } else {
                    extra += '(under review)'
                }
            }
            var c = document.createElement('div')
            c.className = 'comment'
            c.innerHTML = `
                <div class="text">${comment.text}</div>
                <div class="meta">
                    by <span class="name">${comment.name}</span>
                    on
                    <span class="date">${comment.date}</span>
                    ${extra}
                </div>
            `
            c.querySelectorAll('button.publish-comment').forEach(button => {
                button.title = "click to publish"
                button.addEventListener("click", event => {
                    button.disabled = true
                    publish_comment(comment.id).then(response => {
                        button.remove()
                    })
                })
            })
            content.append(c)
        })
        var add = document.querySelector('.add-comment')
        add.style.display = 'block'
        cdiv.querySelector('.block').append(add)
        cdiv.querySelector('h3').addEventListener("click", event => {
            var img = cdiv.querySelector('h3 .icon')
            if (cdiv.classList.contains("collapsed")) {
                cdiv.classList.remove("collapsed")
                img.innerHTML = icon.down
            } else {
                cdiv.classList.add("collapsed")
                img.innerHTML = icon.right
            }
        })
}

document.querySelector('button#add-comment').addEventListener('click', event => {
    var data = {}, csrf;
    document.querySelector('.add-comment').querySelectorAll('input,textarea').forEach(input => {
        if (input.name == 'csrfmiddlewaretoken') {
            csrf = input.value.trim()
        } else {
            data[input.name] = input.value.trim()
            if (!data[input.name]) {
                delete data[input.name]
            }
        }
    })
    data.item = pandora.comment
    fetch("/comment/", {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRFToken': csrf
        },
        body: JSON.stringify(data)
    }).then(response => {
        return response.json()
    }).then(response => {
        var comment = document.createElement('div')
        comment.classList.add('comment')
        comment.innerHTML = `
            <div class="text"></div>
            <div class="meta">
                by <span class="name"></span>
                on
                <span class="date"></span>
            </div>
        `
        comment.querySelector('.name').innerText = response.name
        comment.querySelector('.date').innerText = response.date
        comment.querySelector('.text').innerText = response.text
        document.querySelector('.comments .comments-content').append(comment)
        document.querySelector('.add-comment textarea').value = ''
    })
})