import Moveable from "lit-moveable";
import { LitElement, html } from "lit";
import { customElement, property, state } from "lit/decorators.js";
import { ref, createRef } from "lit/directives/ref.js";

@customElement("lit-app")
export default class App extends LitElement {
    moveableRef: Ref<Moveable> = createRef(null);
    @state()
    target: HTMLElement | null = null;
    render() {
        return html `<div class="container">
    <div style="width: 500px;height: 500px;border: 1px solid black;"></div>
    <img
        id="drag1"
        src="https://www.w3schools.com/html/img_w3slogo.gif"
        draggable="true"
        @dragStart=${this.onDragStart}
    ></img>
    <lit-moveable
        ${ref(this.moveableRef)}
        .target=${this.target}
        .dragContainer=${".container"}
        .litDraggable=${true}
        .preventDefault=${false}
        @litDrag=${this.onDrag}
    ></lit-moveable>
</div>`;
    }
    onDragStart(e) {
        const nativeEvent = e.nativeEvent;
        if (!this.target) {
            this.moveableRef.value!.waitToChangeTarget().then(() => {
                this.moveableRef.value!.dragStart(nativeEvent);
            });
            this.target = document.querySelector<HTMLElement>("#drag1");
        }
    }
    onDrag(e) {
        e.target.style.cssText += e.cssText;
    }
}