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

function render(domains) {
    document.body.replaceWith(
        body({},
            header('domains'),
            div({id: 'new'},
                input({
                    type: 'text',
                    name: 'domain',
                    id: 'domain',
                    placeholder: 'Type domain name to create new records',
                    autocomplete: "off",
                }),
                button({onclick: () => {
                    let domain = document.getElementById('domain').value

                    if (!is_domain(domain)) {
                        alert("Invalid domain")
                        return
                    }

                    location.href = '/domain?domain='+domain
                }},
                    parse("Create")    
                )
            ),
            ...domain(domains)
        )
    )
}

function domain(domains) {
    let divs = []
    for (const domain of domains) {
        divs.push(
            div({class: 'domain'},
                div({class: 'block'},
                    parse(domain)
                ),
                button({class: 'edit', onclick: (event) => {
                    console.log(event.target.parentElement)
                    let domain = event
                        .target
                        .parentElement
                        .getElementsByClassName('block')[0]
                        .innerText

                    if (!is_domain(domain)) {
                        alert("Invalid domain")
                        return
                    }

                    location.href = '/domain?domain='+domain
                }},
                    parse("Edit")    
                ),
                button({class: 'delete', onclick: async () => {
                    let res = await del_domain(domain)

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

                    location.reload()
                }},
                    parse("Delete")    
                )
            )
        )
    }
    return divs
}

async function init() {

    let res = await domains();

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

    render(res.json)

}

init()