<html>
    <head>
        <meta charset="utf-8">
        <title>Kittybox-Micropub debug client</title>
        <style type="text/css">
        * {
            box-sizing: border-box;
        }
        :root {
            font-family: sans-serif;
        }
        body {
            margin: 0;
        }
        body > main {
            margin: auto;
            max-width: 1024px;
        }
        h1.header {
            margin-top: 0.75em;
            text-align: center;
        }
        fieldset + fieldset, fieldset + input, section + section, section + fieldset {
            margin-top: 0.75em;
        }
        input[type="submit"] {
            margin-left: auto;
            display: block;
        }
        form > fieldset > section > label {
            width: 100%;
            display: block;
        }
        form > fieldset > section > input, form > fieldset > section > textarea {
            width: 100%;
        }
        textarea {
            min-height: 10em;
        }
        </style>
        <script type="module">
            const form = document.getElementById("micropub");
            const channel_select_radio = document.getElementById("select_channels");
            channel_select_radio.onclick = async () => {
                const channels = await query_channels()
                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
                    }
                }
            }

            async function query_channels() {
                const response = await fetch(form.action + "?q=config", {
                    headers: {
                        "Authorization": `Bearer ${form.elements.access_token.value}`
                    }
                })

                const config = await response.json();

                return config["channels"]
            }

            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()
                console.log(JSON.stringify(construct_body(form)))
                try {
                    const response = await fetch(form.action, {
                        method: form.method,
                        headers: {
                            "Authorization": `Bearer ${form.elements.access_token.value}`,
                            "Content-Type": "application/json"
                        },
                        body: JSON.stringify(construct_body(form))
                    })
                    if (response.status != 201 || response.status != 202) {
                        console.error(await response.json());
                    }
                    if (response.headers.get("Location")) {
                        window.location.href = response.headers.get("Location");
                    }
                } catch (e) {
                    console.error(e)
                }
            }
        </script>
    </head>
    <body>
        <h1 class="header">Kittybox-Micropub debug client</h1>

        <main>
            <p>
                In a pinch? Lost your Micropub client, but need to make a quick announcement?
                Worry not, the debug client has your back. <i>I just hope you have a spare Micropub token stored somewhere like I do...</i>
            </p>

            <form action="/micropub" method="POST" id="micropub">
                <fieldset>
                    <legend>Authorization details</legend>
                    <section>
                        <label for="access_token">Access token:</label>
                        <input id="access_token" name="access_token" type="password">

                        <p><a href="https://gimme-a-token.5eb.nl/" target="_blank">Get an access token (will open in a new tab)</a></p>
                    </section>
                </fieldset>
                <fieldset>
                    <legend>Post details:</legend>
                    <section>
                        <label for="name">Name (leave blank for an unnamed post):</label>
                        <input id="name" type="text">
                    </section>
                    <section>
                        <label for="content">Content:</label>
                        <textarea id="content" placeholder="Your post's text goes here"></textarea>
                    </section>
                    <section>
                        <label for="category">Categories (separeted by commas):</label>
                        <input id="category" type="text">
                    </section>
                    <fieldset>
                        <legend>Channels</legend>
                        <section>
                            <input type="radio" id="no_channel" name="channel_select" checked value="">
                            <label for="no_channel">Default channel only</label>
                        </section>

                        <section>
                            <input type="radio" id="select_channels" name="channel_select" value="on">
                            <label for="select_channels">Select channels manually</label>
                        </section>
                        
                        <fieldset id="channels" style="display: none">
                            <legend>Available channels:</legend>
                            <template id="channel_selector">
                                <section>
                                    <input type="checkbox" name="channel" id="" value="">
                                    <label for=""></label>
                                </section>
                            </template>
                            <div id="channels_target"></div>
                        </fieldset>
                    </fieldset>
                </fieldset>
                <input type="submit">
            </form>
        </main>
    </body>
</html>