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

@customElement("lit-app")
export default class App extends LitElement {
    render() {
        return html `<div class="root">
    <div class="container">
        <button @click=${this.onClick}>Random Resize</button>
        <div class="target target1">Target1</div>
        <div class="target target2">Target2</div>
        <div class="target target3">Target3</div>
        <lit-moveable
            .target=${".target"}
            .litDraggable=${true}
            .rotatable=${true}
            .resizable=${true}
            .useResizeObserver=${true}
            @litDragGroup=${this.onDragGroup}
            @litResizeGroup=${this.onResizeGroup}
            @litRotateGroup=${this.onRotateGroup}
        ></lit-moveable>
    </div>
</div>`;
    }
    onClick() {
        const width = 50 + Math.floor(50 * Math.random());
        const height = 50 + Math.floor(50 * Math.random());
        document.querySelectorAll<HTMLElement>(".target")[Math.floor(Math.random() * 3)].style.cssText += `width: ${width}px;height: ${height}px`;
    }
    onDragGroup(e) {
        e.events.forEach(ev => {
            ev.target.style.transform = ev.transform;
        });
    }
    onResizeGroup(e) {
        e.events.forEach(ev => {
            ev.target.style.width = `${ev.width}px`;
            ev.target.style.height = `${ev.height}px`;
            ev.target.style.transform = ev.drag.transform;
        });
    }
    onRotateGroup(e) {
        e.events.forEach(ev => {
            ev.target.style.transform = ev.drag.transform;
        });
    }
}