// 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";

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 | null = null;

  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() {

    return html`

      <resource-display .uri=${this.uri} rename></resource-display>

      <button @click=${this.unlink}>Unlink</button>

    `;

  }

  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: any) {

    this.uri = u;

    this.dispatchEvent(new CustomEvent("edited"));

  }

  unlink() {

    return this._setUri(null);

  }

}