---
import Base from "../layouts/Base.astro";
---

<Base title="Dong Web">
  <script>
    import { createDong, download, readDong } from "../dong-io";

    class CreateDong extends HTMLElement {
      connectedCallback() {
        // create input
        const form = document.createElement("form");

        const imageLabel = document.createElement("label");
        const audioLabel = document.createElement("label");

        const imageFileName = document.createElement("span");
        const audioFileName = document.createElement("span");

        const imageSelect = document.createElement("input");
        const audioSelect = document.createElement("input");

        const filename = document.createElement("input");
        const fileLabel = document.createElement("label");
        const createButton = document.createElement("button");

        const errormsg = document.createElement("div");

        imageSelect.type = "file";
        imageSelect.accept = "image/*";
        imageSelect.id = "image-select";

        audioSelect.type = "file";
        audioSelect.accept = "audio/*";
        audioSelect.id = "audio-select";

        imageLabel.innerText = "Image";
        imageLabel.htmlFor = imageSelect.id;
        audioLabel.innerText = "Audio";
        audioLabel.htmlFor = audioSelect.id;

        filename.id = "filename";

        fileLabel.innerText = "Name: ";
        fileLabel.htmlFor = filename.id;

        createButton.type = "submit";
        createButton.textContent = "Create";

        imageLabel.appendChild(imageSelect);
        audioLabel.appendChild(audioSelect);

        imageLabel.appendChild(imageFileName);
        audioLabel.appendChild(audioFileName);
        fileLabel.appendChild(filename);

        form.appendChild(imageLabel);
        form.appendChild(audioLabel);
        form.appendChild(fileLabel);
        form.appendChild(createButton);
        form.appendChild(errormsg);

        this.appendChild(form);

        // functionality
        createButton.addEventListener("click", async (e) => {
          // don't refresh
          e.preventDefault();
          errormsg.innerText = "";

          // quit early if no files
          if (
            !imageSelect.files ||
            !audioSelect.files ||
            imageSelect.files.length === 0 ||
            audioSelect.files.length === 0
          ) {
            errormsg.innerText = "No files selected";
            return;
          }

          if (filename.value === "") {
            errormsg.innerText = "Filename cannot be empty";
            return;
          }

          // get files
          const image = imageSelect.files[0];
          const audio = audioSelect.files[0];

          const res = await createDong(image, audio);
          // if error, show it
          if (typeof res === "string") {
            errormsg.innerText = res;
            return;
          }

          const dongFile = new File(
            [res],
            `${filename.value === "" ? "dong" : filename.value}.dong`,
            {
              type: "application/prs.vielle.dong",
            }
          );

          // download the dong file
          download(dongFile);
        });

        imageSelect.addEventListener("change", (e) => {
          if (!imageSelect.files || imageSelect.files.length === 0) return;
          imageFileName.innerText = imageSelect.files[0].name;
        });

        audioSelect.addEventListener("change", (e) => {
          if (!audioSelect.files || audioSelect.files.length === 0) return;
          audioFileName.innerText = audioSelect.files[0].name;
        });
      }
    }

    class LoadDong extends HTMLElement {
      // do not append as this is only for playing audio
      // loaded here to prevent overlaying the sound
      image = document.createElement("img");
      audio = new Audio();

      connectedCallback() {
        // create input
        const form = document.createElement("form");
        const dongLabel = document.createElement("label");
        const dongSelect = document.createElement("input");
        // image
        const errormsg = document.createElement("div");

        dongSelect.type = "file";
        dongSelect.accept = ".dong";
        dongSelect.id = "dong-select";

        dongLabel.innerText = "Upload .dong";
        dongLabel.htmlFor = dongSelect.id;

        dongLabel.appendChild(dongSelect);

        form.appendChild(dongLabel);

        this.appendChild(form);
        this.appendChild(this.image);
        this.appendChild(errormsg);

        // functionality
        dongSelect.addEventListener("change", async (e) => {
          // don't refresh
          e.preventDefault();
          errormsg.innerText = "";

          // quit early if no files
          if (!dongSelect.files || dongSelect.files.length === 0)
            return (errormsg.innerText = "No files selected");

          // get files
          const dongFile = dongSelect.files[0];

          const res = await readDong(dongFile);
          if (typeof res === "string") {
            errormsg.innerText = res;
            return;
          }

          this.image.src = URL.createObjectURL(new Blob([res.image.data]));

          // audio play
          this.audio.src = URL.createObjectURL(new Blob([res.audio.data]));
          this.audio.play();
        });
      }
    }

    customElements.define("create-dong", CreateDong);
    customElements.define("load-dong", LoadDong);

    async function handleFile(file: File) {
      const load_dong = document.getElementById("load") as LoadDong;
      const res = await readDong(file);
      if (typeof res === "string") return;
      load_dong.image.src = URL.createObjectURL(new Blob([res.image.data]));
      load_dong.audio.src = URL.createObjectURL(new Blob([res.audio.data]));
      load_dong.audio.play();
    }

    if ("launchQueue" in window && "LaunchParams" in window) {
      (window as any).launchQueue.setConsumer(
        async (launchParams: { files: any[] }) => {
          if (!launchParams.files.length) {
            return;
          }
          const fileHandle = launchParams.files[0];
          const blob: Blob = await fileHandle.getFile();
          handleFile(new File([blob], "", { type: blob.type }));
        }
      );
    }
  </script>

  <style slot="head" is:inline>
    :root {
      --accent: #f80085;
    }
    * {
      color: white;
    }

    button {
      background-color: var(--accent);
      &:empty {
        display: none;
      }
    }

    body {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: start;
      gap: 1rem;
      min-height: 100vh;
      background-color: hsl(270, 50%, 10%);
      max-width: 60ch;
      margin: auto;
      padding: 1rem;
      margin-block-end: 5rem;
    }

    label:has(input[type="file"]),
    button {
      background-color: var(--accent);
      border: none;
      padding: 0.5rem;
      padding-inline: 1rem;

      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      &:is(label) > input[type="file"] {
        display: none;
      }
    }

    :is(div, span):empty {
      display: none;
    }

    img:not([src]) {
      display: none;
    }

    img {
      max-width: 100%;
    }

    .logo,
    .logo img {
      width: 100%;
    }
    hr {
      width: 100%;
    }

    label:has(input:not([type])) {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      gap: 0.5rem;
    }

    input:not([type]) {
      border: 0.2rem solid white;
      background-color: transparent;
      width: 100%;
    }

    label:has(input[type="file"]):has(span) {
      height: 3lh;
      gap: 0.5rem;
    }

    create-dong form {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 1rem;
    }

    load-dong {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    create-dong span {
      width: 100%;
      height: 1lh;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  </style>

  <!-- logo -->
  <div class="logo">
    <img src="/logo.svg" alt="logo" />
  </div>

  <hr />

  <!-- creation -->
  <create-dong id="create"></create-dong>

  <hr />

  <!-- loading -->
  <load-dong id="load"></load-dong>
</Base>