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";
import { repeat } from "lit/directives/repeat.js";

@customElement("lit-app")
export default class App extends LitElement {
    @state()
    targets: Array<string> = [".cube1", ".cube2"];
    moveableRef: Ref<Moveable> = createRef(null);
    cubes: any = [];
    constructor() {
        super();
        for (let i = 0; i < 30; ++i) {
            this.cubes.push(i);
        }
    }
    render() {
        return html `<div class="root">
    <div class="container">
        <lit-moveable
            ${ref(this.moveableRef)}
            .litDraggable=${true}
            .target=${this.targets}
            @litDragGroupStart=${this.onDragGroupStart}
            @litDrag=${this.onDrag}
            @litDragGroup=${this.onDragGroup}
        ></lit-moveable>
        <div class="elements selecto-area">${repeat(
            this.cubes,
            i => i,
            i => html `<div .class=${`cube cube${i}`}></div>`
        )}</div>
        <div class="empty elements"></div>
    </div>
</div>`;
    }
    onDragGroupStart() {
        requestAnimationFrame(() => {
            if (this.targets.length === 2) {
                this.targets = [".cube1", ".cube2", ".cube3"];
            } else if (this.targets.length === 3) {
                this.targets = [".cube1", ".cube2", ".cube3", ".cube4"];
            }
        });
    }
    onDrag(e) {
        e.target.style.cssText += e.cssText;
    }
    onDragGroup(e) {
        e.events.forEach(ev => {
            ev.target.style.cssText += ev.cssText;
        });
    }
}