import { del_domain, domains, records } from './api.js'
import { header } from './components.js'
import { body, parse, div, input, button, span, is_domain } from './main.js';

function render(domain, records) {

    let divs = []
    for (const record of records) {
        divs.push(gen_record(record))
    }

    document.body.replaceWith(
        body({},
            header(domain),
            div({id: 'buttons'},
                button({onclick: (event) => {
                    location.href = '/home'
                }}, parse("Home")),
                button({}, parse("New Record")),
            ),
            ...divs
        )
    )
}

function gen_record(record) {
    let domain = record.domain
    let prefix = record.prefix

    if (prefix.length > 0) {
        prefix = prefix + '.'
    }

    let type = Object.keys(record.record)[0]
    let data = record.record[type]

    let divs = []
    for (const key in data) {
        let disp_key;
        if (key == 'ttl') {
            disp_key = 'TTL'
        } else {
            disp_key = upper(key)
        }
        divs.push(
            div({class: 'poperty'},
                div({class: 'key'}, parse(disp_key)),
                div({class: 'value'}, parse(data[key])),
            )
        )
    }

    return div({class: 'record'},
        div({class: 'header'},
            span({class: 'type'}, parse(type)),
            span({class: 'prefix'}, parse(prefix)),
            span({class: 'domain'}, parse(domain)),
            button({}, parse("Edit")),
            button({class: 'delete'}, parse("Delete"))
        ),
        div({class: 'properties'},
            ...divs
        )
    )
}

function upper(string) {
    return string.charAt(0).toUpperCase() + string.slice(1);
}

async function init() {

    const params = new Proxy(new URLSearchParams(window.location.search), {
        get: (searchParams, prop) => searchParams.get(prop),
    });

    let domain = params.domain;

    if (!is_domain(domain)) {
        location.href = '/home'
        return
    }

    let res = await records(domain);

    if (res.status !== 200) {
        alert(res.msg)
        return
    }

    render(domain, res.json)

}

init()