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

@customElement("lit-app")
export default class App extends LitElement {
    @state()
    snapContainer: HTMLElement | string = ".snapGrid";
    render() {
        return html `<div
    class="root"
    style="position: relative;border: 1px solid black;"
>
    <lit-moveable
        .target=${".target"}
        .litDraggable=${true}
        .snappable=${true}
        .horizontalGuidelines=${[0, 100, 200, 300]}
        .verticalGuidelines=${[0, 100, 200, 300]}
        .snapContainer=${this.snapContainer}
        @litDragStart=${this.onDragStart}
        @litDrag=${this.onDrag}
        @litDragEnd=${this.onDragEnd}
    ></lit-moveable>
    <div class="container">
        <div class="snapGrid">
            <div
                class="target"
                style="width: 200px;height: 150px;transform: translate(0px, 0px) scale(1.5, 1);"
            >Target</div>
        </div>
        <div class="snapGrid"></div>
    </div>
</div>`;
    }
    onMoustEnter(e: MouseEvent) {
        this.snapContainer = e.currentTarget as HTMLElement;
    }
    onDragStart() {
        document.querySelectorAll<HTMLElement>(".snapGrid").forEach(grid => {
            grid.addEventListener("mouseenter", this.onMoustEnter);
        });
    }
    onDrag(e) {
        e.target.style.transform = e.transform;
        e.target.style.pointerEvents = "none";
    }
    onDragEnd(e) {
        e.target.style.pointerEvents = "";
        document.querySelectorAll<HTMLElement>(".snapGrid").forEach(grid => {
            grid.removeEventListener("mouseenter", this.onMoustEnter);
        });
    }
}