const requestURL = 'http://localhost:8080/'
const xhr = new XMLHttpRequest()

const sumButton = document.getElementById('sumSubmitButton')
const minButton = document.getElementById('minSubmitButton')
const lowCaseButton = document.getElementById('lowCaseButton')
const joinButton = document.getElementById('joinButton')

const get = (url) => {
    return new Promise((resolve, reject) => {
        xhr.open('GET', url)
        
        xhr.onload = () => {
            if(xhr.status == 200) resolve(xhr.response)
            else reject(xhr.response)
        }
        xhr.onerror = () => {   
            reject(xhr.response)
        }
        xhr.send()
    })
}

sumButton.addEventListener("click", (e) => {
    e.preventDefault()
    const value1 = (document.getElementById('sumVal1')).value
    const value2 = (document.getElementById('sumVal2')).value
    const res = document.getElementById('sumResult') 
    get(`${requestURL}sum?val1=${value1}&val2=${value2}`)
    .then(data => {
        res.innerHTML = data
    })
    .catch(err => console.log(err)) 
})

minButton.addEventListener("click", (e) => {
    e.preventDefault()
    const value1 = (document.getElementById('minVal1')).value
    const value2 = (document.getElementById('minVal2')).value
    const res = document.getElementById('minResult') 
    get(`${requestURL}minus?val1=${value1}&val2=${value2}`)
    .then(data => {
        res.innerHTML = data
    })
    .catch(err => console.log(err))
})  

lowCaseButton.addEventListener("click", (e) => {
    e.preventDefault()
    const value = document.getElementById('lowCaseInput').value
    const res = document.getElementById('lowCaseResult') 
    get(`${requestURL}toLowerCase?value=${value}`)
    .then(data => {
        res.innerHTML = data
    })
    .catch(err => console.log(err))
})

joinButton.addEventListener("click", (e) => {
    e.preventDefault()
    const str1 = document.getElementById('joinInput1').value
    const str2 = document.getElementById('joinInput2').value
    const res = document.getElementById('joinResult') 
    get(`${requestURL}join?str1=${str1}&str2=${str2}`)
    .then(data => {
        res.innerHTML = data
    })
    .catch(err => console.log(err))
})