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

@customElement("lit-app")
export default class App extends LitElement {
    snappable: any = "$preview_snappable";
    isDisplaySnapDigit: any = "$preview_isDisplaySnapDigit";
    isDisplayInnerSnapDigit: any = "$preview_isDisplayInnerSnapDigit";
    snapGap: any = "$preview_snapGap";
    snapDirections: any = "$preview_snapDirections";
    elementSnapDirections: any = "$preview_elementSnapDirections";
    snapThreshold: any = "$preview_snapThreshold";
    maxSnapElementGuidelineDistance: any = "$preview_maxSnapElementGuidelineDistance";
    targetRef: Ref<HTMLDivElement> = createRef(null);
    moveableRef: Ref<Moveable> = createRef(null);
    render() {
        return html `<div class="root">
    <div
        class="container"
        style="left: 200px;top: 100px;width: 500px;height: 500px;border: 1px solid #ccc;"
    >
        <div
            class="target element1"
            style="width: 100px;height: 100px;left: 0px;top: 120px;"
        >Element1</div>
        <div
            class="target element2"
            style="width: 100px;height: 100px;left: 400px;top: 120px;"
        >Element2</div>
        <div
            class="target element3"
            style="width: 300px;height: 100px;top: 400px;left: 50px;"
        >Element3</div>
        <div
            class="target"
            ${ref(this.targetRef)}
            style="width: 150px;height: 150px;"
        >Target</div>
        <lit-moveable
            ${ref(this.moveableRef)}
            .target=${this.targetRef}
            .litDraggable=${true}
            .scalable=${true}
            .rotatable=${true}
            .snappable=${this.snappable}
            .isDisplaySnapDigit=${this.isDisplaySnapDigit}
            .isDisplayInnerSnapDigit=${this.isDisplayInnerSnapDigit}
            .snapGap=${this.snapGap}
            .snapDirections=${this.snapDirections}
            .elementSnapDirections=${this.elementSnapDirections}
            .snapThreshold=${this.snapThreshold}
            .maxSnapElementGuidelineDistance=${this.maxSnapElementGuidelineDistance}
            .elementGuidelines=${[".element1", ".element2", ".element3"]}
            @litRender=${this.onRender}
            @litSnap=${this.onSnap}
        ></lit-moveable>
    </div>
</div>`;
    }
    onRender(e) {
        e.target.style.cssText += e.cssText;
    }
    onSnap(e) {
        console.log(e.guidelines, e.elements);
    }
}