// 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

    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()
setInterval(function(){
    getMessages()
}, 2000)