const upstream_dns_servers_table_body = document.querySelector('#upstream-dns-servers-table-body')
const local_domains_table_body = document.querySelector('#local-domains-table-body')
const cache_size_input = document.querySelector('#cache-size-input')
const save_settings_button = document.querySelector('#save-settings-button')

var settings = {}

const updateInterface = () => {
    upstream_dns_servers_table_body.innerHTML = ""
    local_domains_table_body.innerHTML = ""
    for (var i = 0; i < settings.resolv.length; i++) {
        upstream_dns_servers_table_body.innerHTML += `<tr>
                            <th class="d-flex align-items-center justify-content-between">
                                ${settings.resolv[i]}
                                <button class="delete-table-button btn btn-danger">Del</button>
                            </th>
                        </tr>`
    }
    for (const [key, value] of Object.entries(settings.hosts)) {
        if (Array.isArray(value)) {
            for (var i = 0; i < value.length; i++) {
                local_domains_table_body.innerHTML += `<tr>
                                <th>${key}</th>
                                <th>${value[i]}</th>
                                <th><button class="deldomain btn btn-danger" id="${value[i]}">Del</button>
                                </th>
                            </tr>`
            }
        } else {
            local_domains_table_body.innerHTML += `<tr>
                                    <th>${key}</th>
                                    <th>${value}</th>
                                    <th><button class="deldomain btn btn-danger" id="${value}">Del</button>
                                    </th>
                                </tr>`
        }
    }
    cache_size_input.value = settings.cache_size
}

const getSettings = () => {
    fetch(window.location.origin + "/api/settings")
    .then(data => data.json())
    .then(jsondata => {
        settings = jsondata
        updateInterface()
    })
}

const setSettings = () => {
    fetch(window.location.origin + "/api/settings", {
        method: 'POST',
        body: JSON.stringify(settings)
    }).then(data => data.json())
    .then(jsondata => {
        settings = jsondata
        updateInterface()
    })
}

save_settings_button.addEventListener('click', () => {
    setSettings()
})

const write_cache_size = (value) => {
    settings.cache_size = value
}

cache_size_input.addEventListener('change', (e) => {
    write_cache_size(e.target.value)
})

cache_size_input.addEventListener('input', (e) => {
    write_cache_size(e.target.value)
})

getSettings()