// see light9/editchoice.py for gtk version
import debug from "debug";
import { css, html, LitElement } from "lit";
import { customElement, property } from "lit/decorators.js";
import { NamedNode } from "n3";
import { $V, Vector } from "sylvester";
export { ResourceDisplay } from "../web/ResourceDisplay";
const log = debug("editchoice");
const RDFS = "http://www.w3.org/2000/01/rdf-schema#";

function setupDrop(
  senseElem: HTMLElement,
  highlightElem: HTMLElement,
  coordinateOriginElem: HTMLElement | null,
  onDrop: (uri: NamedNode, pos: Vector | null) => void
) {
  const highlight = () => highlightElem.classList.add("dragging");
  const unhighlight = () => highlightElem.classList.remove("dragging");

  senseElem.addEventListener("drag", (event: DragEvent) => { });

  senseElem.addEventListener("dragstart", (event: DragEvent) => { });

  senseElem.addEventListener("dragend", (event: DragEvent) => { });

  senseElem.addEventListener("dragover", (event: DragEvent) => {
    event.preventDefault();
    event.dataTransfer!.dropEffect = "copy";
    highlight();
  });

  senseElem.addEventListener("dragenter", (event: DragEvent) => {
    highlight();
  });

  senseElem.addEventListener("dragleave", (event: DragEvent) => {
    unhighlight();
  });

  senseElem.addEventListener("drop", (event: DragEvent) => {
    event.preventDefault();
    const uri = new NamedNode(event.dataTransfer!.getData("text/uri-list"));

    let pos: Vector | null = null;
    if (coordinateOriginElem != null) {
      const root = coordinateOriginElem.getBoundingClientRect();
      pos = $V([event.pageX - root.left, event.pageY - root.top]);
    }

    try {
      onDrop(uri, pos);
    } catch (e) {
      log(e);
    }
    unhighlight();
  });
}

// Picks a URI based on the caller setting the property OR
// the user drag-and-dropping a text/uri-list resource (probably
// an <resource-display> or <a href> tag)
@customElement("edit-choice")
export class EditChoice extends LitElement {
  @property() uri?: NamedNode
  @property({ type: Boolean }) nounlink = false;
  @property({ type: Boolean }) rename = false;
  static styles = [
    css`
      :host {
        display: inline-block;
        background: #141448;
        /* min-width: 10em; */
        padding: 3px 8px;
      }
      .dragging {
        background: rgba(126, 52, 245, 0.0784313725490196);
        box-shadow: 0 0 20px #ffff00;
      }
      a {
        color: #8e8eff;
        padding: 3px;
        display: inline-block;
        font-size: 145%;
      }
    `,
  ];
  render() {
    const unlink = html`
    <button @click=${this.unlink}>Unlink</button>
    `
    return html`
      <resource-display .uri=${this.uri} ?rename=${this.rename}></resource-display>
      ${this.nounlink ? html`` : unlink}
    `;
  }

  constructor() {
    super();
    setupDrop(this, this, null, this._setUri.bind(this));
  }

  // updated(changedProperties: PropertyValues) {
  //   log('cp' ,changedProperties)
  //   if (changedProperties.has("box")) {
  //     log('setupdrop', this.box)
  //     setupDrop(this.box, this.box, null, this._setUri.bind(this));
  //   }
  // }

  _setUri(u?: NamedNode) {
    this.uri = u;
    this.dispatchEvent(new CustomEvent("edited", { detail: { newValue: u } }));
  }

  unlink() {
    return this._setUri(undefined);
  }
}