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

const MouseEnterLeaveAble = makeAble("enterLeave", {
    mouseEnter(moveable: MoveableManagerInterface) {
        if (moveable.moveables) {
            moveable.moveables.forEach(child => {
                child.state.target!.style.backgroundColor = "#e55";
            });
        } else {
            moveable.state.target!.style.backgroundColor = "#e55";
        }
    },
    mouseLeave(moveable: MoveableManagerInterface) {
        if (moveable.moveables) {
            moveable.moveables.forEach(child => {
                child.state.target!.style.backgroundColor = "";
            });
        } else {
            moveable.state.target!.style.backgroundColor = "";
        }
    }
});
@customElement("lit-app")
export default class App extends LitElement {
    targetRef: Ref<HTMLDivElement> = createRef(null);
    render() {
        return html `<div class="container">
    <div class="target target1">Target1</div>
    <div class="target target2">Target2</div>
    <div
        class="target target3"
        ${ref(this.targetRef)}
    >Target3</div>
    <lit-moveable
        .target=${this.targetRef}
        .ables=${[MouseEnterLeaveAble]}
        .origin=${false}
        .props=${{ enterLeave: true
        }}
        .litDraggable=${true}
        @litDrag=${this.onDrag}
    ></lit-moveable>
    <lit-moveable
        .target=${[".target1", ".target2"]}
        .ables=${[MouseEnterLeaveAble]}
        .origin=${false}
        .props=${{ enterLeave: true
        }}
        .litDraggable=${true}
        @litDragGroup=${this.onDragGroup}
    ></lit-moveable>
</div>`;
    }
    onDrag(e) {
        e.target.style.transform = e.transform;
    }
    onDragGroup(e) {
        e.events.forEach(ev => {
            ev.target.style.transform = ev.transform;
        });
    }
}