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 {
    @state()
    groupInstances: any[] = [];
    t1: Ref<any> = createRef(null);
    t2: Ref<any> = createRef(null);
    groupMoveable: Ref<any> = createRef(null);
    render() {
        return html `<div class="root">
    <div class="container">
        <div .class=${`target target1`}>Target 1</div>
        <div .class=${`target target2`}>Target 2</div>
        <lit-moveable
            ${ref(this.t1)}
            .target=${`.target1`}
            .litDraggable=${true}
            .edgeDraggable=${true}
            .origin=${false}
            @litDragStart=${handleDragStart}
        ></lit-moveable>
        <lit-moveable
            ${ref(this.t2)}
            .target=${`.target2`}
            .litDraggable=${true}
            .origin=${false}
            .edgeDraggable=${true}
            @litDragStart=${handleDragStart}
        ></lit-moveable>
        <lit-moveable
            ${ref(this.groupMoveable)}
            .target=${this.groupInstances}
            .hideDefaultLines=${false}
            .litDraggable=${true}
            @litDragGroup=${this.onDragGroup}
            @litDragGroupEnd=${this.onDragGroupEnd}
        ></lit-moveable>
    </div>
</div>`;
    }
    initGroupElements() {
        const arr: any[] = [];
        arr.push(document.getElementsByClassName("target1")[0]);
        arr.push(document.getElementsByClassName("target2")[0]);
        this.groupInstances = arr;
    }
    handleDragStart(e: any) {
        initGroupElements();
        this.groupMoveable.value!.dragStart(e.inputEvent);
    }
    onDragGroup(e) {
        e.events.forEach((ev) => (ev.target.style.transform = ev.transform));
        this.t1.value.updateRect();
        this.t2.value.updateRect();
    }
    onDragGroupEnd() {
        this.groupInstances = [];
    }
}