import { LitElement, html, css, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators.js";

@customElement("ingest-drop")
export class IngestDrop extends LitElement {
  static styles = [
    css`
      #drop {
        min-width: 10em;
        min-height: 10em;
        background: gray;
        border: 5px gray dashed;
        margin: 1% 10%;
      }
      #drop.dnd-hover {
        background: yellow;
      }
    `,
  ];

  render() {
    return html`
          <div id="drop" @dragover=${this.dragover} @dragleave=${this.leave} @drop=${this.drop}>
            Drop video file or url here to upload to <em>TOP${this.folder}</em>
          </div>
  }
  dragover(ev: DragEvent) {
    this.shadowRoot?.querySelector("#drop")?.classList.add("dnd-hover");
    ev.preventDefault();
    if (ev.dataTransfer) {
      ev.dataTransfer.dropEffect = "copy";
    }
  }
  leave() {
    this.shadowRoot?.querySelector("#drop")?.classList.remove("dnd-hover");
  }
  drop(ev: DragEvent) {
    ev.preventDefault();
    this.leave();

    if (!ev.dataTransfer) {
      return;
    }

    const url = ev.dataTransfer.getData("text/plain");
    if (url) {
      this.queueUrlToFetch(url);
    } else {
      for (let i = 0; i < ev.dataTransfer.files.length; i++) {
        this.uploadVideoFile(ev.dataTransfer.files[i]);
      }
    }
  }
  queueUrlToFetch(url: string) {
    fetch("../api/ingest/videoUrl?folder=" + encodeURIComponent(this.folder), {
      method: "POST",
      body: url,
    });
  }
  uploadVideoFile(f: File) {
    fetch("../api/ingest/videoUpload?name=" + encodeURIComponent(this.folder + "/" + f.name), {
      method: "POST",
      body: f.stream(),
      duplex: "half",
    } as any /* types don't include 'duplex' */ );
  }
}