// Use JS to write whatever HTML and data you want to the page 

// One way of using JS to write HTML and data is with a multi-line string
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

// UI components
class TextBox extends HTMLElement {
  static observedAttributes = ["id", "handler", "label"];

  constructor() {
    super();
    this._shadowRoot = this.attachShadow({ mode: "open" });
  }

  onEvent(fn) {
    return (event) => {
      event.preventDefault();
      fn(event);
    };
  }

  connectedCallback() {
    const form = document.createElement("form");

    form.addEventListener("submit", this.onEvent(eval(this.handler)));
    form.innerHTML = `
      <label for="'${this.id}'">${this.label}</label>
      <input type="text" id="'${this.id}'" name="'${this.id}'"/>
      `

    this._shadowRoot.appendChild(form);
  }

  attributeChangedCallback(name, oldVal, newVal) {
    if (oldVal == newVal) return;
    this[name] = newVal;
  }
}

customElements.define("text-box", TextBox);

class ImageGenerator {
  constructor() {
    this.apiKey = "";
  }

  async inference(prompt) {
    if (this.apiKey === "") {
      throw {
        name: 'ApiKeyNotSet',
        message: 'Api key not set !'
      };
    }

    const response = await fetch(
      "https://api-inference.huggingface.co/models/runwayml/stable-diffusion-v1-5",
      {
        headers: { Authorization: `Bearer ${this.apiKey}` },
        method: "POST",
        body: JSON.stringify(prompt),
      }
    );

    const result = await response.blob();
    return result;
  }

  set setApiKey(apiKey) {
    document.getElementById("api-error").innerHTML = "";
    this.apiKey = apiKey;
  }
}

// Singleton ImageGenerator
let txtToImg = new ImageGenerator();

function handleApiQuery(ev) {
  ev.preventDefault();

  const inputs = ev.target.elements[0].value.trim();

  const img = txtToImg.inference({"inputs": inputs}).then(blob => {
    const imageUrl = URL.createObjectURL(blob);
    const imgElement = document.createElement('img');
    imgElement.src = imageUrl;

    return imgElement;
  }).then(img => {
    let area = document.getElementById("api-result");
    area.innerHTML = "";
    area.appendChild(img);
  }).catch(err => {
    if (err.name == "ApiKeyNotSet") {
      document.getElementById("api-error").innerHTML = err.message;
    } else throw err;
  });

  ev.target.elements[0].value = "";
}

function handleApiKeyInput(ev) {
  ev.preventDefault();
  txtToImg.setApiKey = ev.target.elements[0].value.trim();
  ev.target.elements[0].value = "";
}

function html() {
  document.write ( `<text-box label="Api Key here:" id="apiKey" handler="handleApiKeyInput"></text-box>

<h1> Inference API </h1>

<text-box label="Prompt:" id="apiQuery" handler="handleApiQuery"></text-box>

<p id="api-error"></p>

<div id="api-result">
</div>
` )
}

function main() {
  html();
}

main();