const updateFields = () => {
    document.querySelectorAll('input, textarea').forEach(field => {
        const focus = () => field.classList.add('focus')
        if (field.value.trim() !== '') focus()
        field.onfocus = focus
        field.onblur = () => {
            if (field.value === '') field.classList.remove('focus')
        }
    })
}

window.addEventListener('DOMContentLoaded', () => {
    const popupTitle = document.querySelector('#popup-title')
    const settingsForm = document.querySelector('#settings-form')
    const serverURLField = document.querySelector('#server-url-field')
    const serverURLFieldLabel = document.querySelector('label[for="server-url-field"]')
    const connectButton = document.querySelector('#connect-button')

    const defaultServerURL = chrome.i18n.getMessage('default_server_url')

    popupTitle.textContent = chrome.i18n.getMessage('popup_title')
    serverURLFieldLabel.textContent = chrome.i18n.getMessage('server_url_field_label')
    connectButton.value = chrome.i18n.getMessage('connect_button')

    chrome.storage.local.get([
        'server_url',
    ]).then((data) => {
        serverURLField.placeholder = defaultServerURL
        serverURLField.value = data.server_url || defaultServerURL
        updateFields()
    })

    settingsForm.addEventListener('submit', (event) => {
        event.preventDefault()
        chrome.storage.local.set({
            'server_url': serverURLField.value.trim() || defaultServerURL,
        }).then(() => {
            window.close()
        })
    })
})