import { LitElement, html, css } 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 url here</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) {
      fetch("../api/ingest/videoUrl", {
        method: "POST",
        body: url,
      });
    } else {
      for (let i = 0; i < ev.dataTransfer.files.length; i++) {
        const f = ev.dataTransfer.files[i];
        const name = f.name;
        const stream = f.stream();
        fetch("../api/ingest/videoUpload?name=" + encodeURIComponent(f.name), {
          method: "POST",
          body: stream,
          duplex: "half",
        } as any);
      }
    }
  }
}