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

function get_token() {
  return (form.elements.namedItem("access_token") as HTMLInputElement).value
}

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

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") as HTMLInputElement;
no_channel_radio.onclick = () => {
  (document.getElementById("channels") as HTMLElement).style.display = "none";
  const channel_list = document.getElementById("channels_target") as HTMLElement
  channel_list.innerHTML = "";
}

function construct_body(form: HTMLFormElement): MF2 {
  let content = (form.elements.namedItem("content") as HTMLInputElement).value;
  let name: string | undefined = (form.elements.namedItem("name") as HTMLInputElement).value || undefined;
  let category: string[] = (form.elements.namedItem("category") as HTMLInputElement).value
    .split(",")
    .map(val => val.trim());

  let channel: string[] | undefined = undefined;
  let channel_select = (form.elements.namedItem("channel_select") as HTMLInputElement).value;
  if (channel_select) {
    let channel_selector = form.elements.namedItem("channel");
    if (channel_selector instanceof RadioNodeList) {
      channel = (Array.from(channel_selector) as HTMLInputElement[])
        .map(i => i.checked ? i.value : false)
        .filter(i => i) as string[];
    } else if (channel_selector instanceof HTMLInputElement) {
      channel = [channel_selector.value]
    }
  }
  return {
    type: ["h-entry"],
    properties: {
      content: [content],
      name: name ? [name] : undefined,
      category: category.length ? category : undefined,
      channel: channel ? channel : undefined
    }
  }
}

function populate_channel_list(channels: MicropubChannel[]) {
  (document.getElementById("channels") as HTMLElement).style.display = "block";
  const channel_list = document.getElementById("channels_target") as HTMLElement;
  channel_list.innerHTML = "";
  channels.forEach((channel) => {
    const template = (document.getElementById("channel_selector") as HTMLTemplateElement).content.cloneNode(true) as HTMLElement;
    const input = template.querySelector("input") as HTMLInputElement;
    const label = template.querySelector("label") as HTMLLabelElement;
    input.id = `channel_selector_option_${channel.uid}`
    input.value = channel.uid
    label.htmlFor = 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") as HTMLElement).style.display = "block";