import { query_channels, submit } from "./micropub_api.js";

function get_token() {
    return form.elements.access_token.value
}

const form = document.getElementById("micropub");
const channel_select_radio = document.getElementById("select_channels");

channel_select_radio.onclick = async () => {
    const channels = await query_channels(form.action, get_token())
    if (channels !== undefined) {
        populate_channel_list(channels)
    }
}

const no_channel_radio = document.getElementById("no_channel");
no_channel_radio.onclick = () => {
    document.getElementById("channels").style.display = "none";
    const channel_list = document.getElementById("channels_target")
    channel_list.innerHTML = "";
}

function construct_body(form) {
    return {
        type: ["h-entry"],
        properties: {
            content: [form.elements.content.value],
            name: form.elements.name.value ? [form.elements.name.value] : undefined,
            category: form.elements.category.value ? form.elements.category.value.split(",").map(val => val.trim()) : undefined,
            channel: form.elements.channel_select.value ?  Array.from(form.elements.channel).map(i => i.checked ? i.value : false).filter(i => i) : undefined
        }
    }
}

function populate_channel_list(channels) {
    document.getElementById("channels").style.display = "block";
    const channel_list = document.getElementById("channels_target")
    channel_list.innerHTML = "";
    channels.forEach((channel) => {
        const template = document.getElementById("channel_selector").content.cloneNode(true)
        const input = template.querySelector("input")
        const label = template.querySelector("label")
        input.id = `channel_selector_option_${channel.uid}`
        input.value = channel.uid
        label.for = input.id
        label.innerHTML = `<a href="${channel.uid}">${channel.name}</a>`

        channel_list.appendChild(template)
    })
}

form.onsubmit = async (event) => {
    event.preventDefault()
    const mf2 = construct_body(form);
    console.log(JSON.stringify(mf2));
    try {
        submit(form.action, get_token(), mf2)
    } catch (e) {
        // TODO show errors to user

        return
    }
    form.clear()
}

document.getElementById("authorized").style.display = "block";
// Local Variables:
// js-indent-level: 4
// End: