const firstOnboardingCard = "intro";

function switchOnboardingCard(card: string) {
  (Array.from(document.querySelectorAll("form.onboarding > fieldset")) as HTMLElement[])
    .map((node: HTMLElement) => {
      if (node.id == card) {
        node.style.display = "block";
      } else {
        node.style.display = "none";
      }
    });

  (Array.from(document.querySelectorAll("form.onboarding > ul#progressbar > li")) as HTMLElement[])
    .map(node => {
      if (node.id == card) {
        node.classList.add("active")
      } else {
        node.classList.remove("active")
      }
    });
};

interface Window {
  kittybox_onboarding: {
    switchOnboardingCard: (card: string) => void
  }
}

window.kittybox_onboarding = {
  switchOnboardingCard
};

(document.querySelector("form.onboarding > ul#progressbar") as HTMLElement).style.display = "";
switchOnboardingCard(firstOnboardingCard);

function switchCardOnClick(event: MouseEvent) {
  if (event.target instanceof HTMLElement) {
    if (event.target.dataset.card !== undefined) {
      switchOnboardingCard(event.target.dataset.card)
    }
  }
}

function multiInputAddMore(event: (MouseEvent | { target: HTMLElement })) {
  if (event.target instanceof HTMLElement) {
    let parent = event.target.parentElement;
    if (parent !== null) {
      let template = (parent.querySelector("template") as HTMLTemplateElement).content.cloneNode(true);
      parent.prepend(template);
    }
  }
}

(Array.from(
  document.querySelectorAll(
    "form.onboarding > fieldset button.switch_card"
  )
) as HTMLButtonElement[])
  .map(button => {
    button.addEventListener("click", switchCardOnClick)
  });

(Array.from(
  document.querySelectorAll(
    "form.onboarding > fieldset div.multi_input > button.add_more"
  )
) as HTMLButtonElement[])
  .map(button => {
    button.addEventListener("click", multiInputAddMore)
    multiInputAddMore({ target: button });
  });

const form = document.querySelector("form.onboarding") as HTMLFormElement;
console.log(form);
form.onsubmit = async (event: SubmitEvent) => {
    console.log(event);
    event.preventDefault();
    const form = event.target as HTMLFormElement;
    const json = {
        user: {
          type: ["h-card"],
          properties: {
            name: [(form.querySelector("#hcard_name") as HTMLInputElement).value],
            pronoun: (Array.from(
              form.querySelectorAll("#hcard_pronouns")
            ) as HTMLInputElement[])
              .map(input => input.value).filter(i => i != ""),
            url: (Array.from(form.querySelectorAll("#hcard_url")) as HTMLInputElement[])
              .map(input => input.value).filter(i => i != ""),
            note: [(form.querySelector("#hcard_note") as HTMLInputElement).value]
          }
        },
        first_post: {
          type: ["h-entry"],
          properties: {
            content: [(form.querySelector("#first_post_content") as HTMLTextAreaElement).value]
          }
        },
      blog_name: (form.querySelector("#blog_name") as HTMLInputElement).value,
      feeds: (Array.from(
        form.querySelectorAll(".multi_input#custom_feeds > fieldset.feed")
      ) as HTMLElement[])
        .map(form => {
          return {
            name: (form.querySelector("#feed_name") as HTMLInputElement).value,
            slug: (form.querySelector("#feed_slug") as HTMLInputElement).value
          }
        }).filter(feed => feed.name == "" || feed.slug == "")
    };

    await fetch("/.kittybox/onboarding", {
        method: "POST",
        body: JSON.stringify(json),
        headers: { "Content-Type": "application/json" }
    }).then(response => {
        if (response.status < 400) {
            window.location.href = response.headers.get("Location") ?? "/";
        }
    })
}