// modal form handle
if (document.querySelector('.modal__form-submit')) {
    document.querySelector('.modal__form-submit').addEventListener('click', function (e) {
        e.preventDefault()
        const value = document.querySelector('.modal__form-input').value
        if (value.length >= 3) {
            var date = new Date(Date.now())
            date = date.setTime(date.getTime() + (90 * 24 * 60 * 60 * 1000))
            date = new Date(date)
            const expires = '; expires=' + date.toUTCString()
            document.cookie = 'outchat_name=' + (value || '') + expires + '; path=/'
            window.location.href = ''
        }
    })
}

document.querySelector('.form__input-message').addEventListener('keydown', function (e) {
    if (e.ctrlKey && e.keyCode == 13) {
        document.querySelector('.form__input-submit').click()
    }
})

document.querySelector('.form__input-submit').addEventListener('click', function (e) {
    e.preventDefault()

    const name = getCookie('outchat_name')
    const text = document.querySelector('.form__input-message').value
    document.querySelector('.form__input-message').value = ''

    var formData = new FormData()
    formData.append(name, text)

    fetch('api.php?action=createMessage', {
        method: 'post',
        headers: {
            "Content-Type": "application/x-www-form-urlencoded"
        },
        body: 'name=' + name + '&text=' + text
    })
        .then(function (data) {
            getMessages()
        })
        .catch(function (error) {
            console.log(error)
        })
})

function getMessages() {
    const timestamp = (document.querySelector('.chat').lastElementChild) ? document.querySelector('.chat').lastElementChild.getAttribute('data-timestamp') : 0

    return fetch('api.php?action=getMessages&timestamp=' + timestamp)
        .then(function (data) {
            return data.json()
        })
        .then(function (data) {
            if (data.length > 0) {
                if ((window.scrollY + window.innerHeight) == document.body.scrollHeight) {
                    setTimeout(function () {
                        scrollWindowDown()
                    }, 100)
                }
                for (message of data) {
                    createMessageNode(message.name, message.text_processed, message.timestamp, message.datetime)
                }
            }
        })
        .catch(function (error) {
            console.log(error)
        })
}

function createMessageNode(name, text, timestamp, datetime) {
    const elementMain = document.createElement('div', {class: 'message'})
    const elementText = document.createElement('div', {class: 'message__text'})
    const elementInfo = document.createElement('div', {class: 'message__info'})
    const elementName = document.createElement('div', {id: 'message__info-name'})
    const elementDatetime = document.createElement('div', {id: 'message__info-datetime'})
    const contentName = document.createTextNode(name)
    const contentDatetime = document.createTextNode('[' + datetime + ']')
    //const contentText = document.createTextNode(text)

    // element creation
    elementMain.classList.add('message')
    elementText.classList.add('message__text')
    elementInfo.classList.add('message__info')
    elementDatetime.classList.add('message__info-datetime')
    elementName.classList.add('message__info-name')

    // "hash" name color
    elementName.style.color = "#" + intToRGB(hashCode(name))

    // append everything to chat
    elementName.appendChild(contentName)
    elementDatetime.appendChild(contentDatetime)
    elementText.innerHTML = text

    elementInfo.appendChild(elementName)
    elementInfo.appendChild(elementDatetime)

    elementMain.appendChild(elementInfo)
    elementMain.appendChild(elementText)
    elementMain.setAttribute('data-timestamp', timestamp)

    document.querySelector('.chat').appendChild(elementMain)

    return true
}

getMessages().then(() => {
    scrollWindowDown()
})

setInterval(function () {
    getMessages()
}, 2000)

if (inIframe()) {
    document.querySelector('.modal__info_url').style.visibility = 'visible';
}