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 {
    hideChildMoveableDefaultLines: any = "$preview_hideChildMoveableDefaultLines";
    draggable: any = "$preview_draggable";
    throttleDrag: any = "$preview_throttleDrag";
    edgeDraggable: any = "$preview_edgeDraggable";
    startDragRotate: any = "$preview_startDragRotate";
    throttleDragRotate: any = "$preview_throttleDragRotate";
    scalable: any = "$preview_scalable";
    keepRatio: any = "$preview_keepRatio";
    throttleScale: any = "$preview_throttleScale";
    renderDirections: any = "$preview_renderDirections";
    rotatable: any = "$preview_rotatable";
    throttleRotate: any = "$preview_throttleRotate";
    rotationPosition: any = "$preview_rotationPosition";
    render() {
        return html `<div class="container">
    <div class="target target1">Target1</div>
    <div class="target target2">Target2</div>
    <div
        class="target target3"
        style="transform: scale(1, -1);"
    >Target3</div>
    <lit-moveable
        .target=${".target"}
        .hideChildMoveableDefaultLines=${this.hideChildMoveableDefaultLines}
        .litDraggable=${this.draggable}
        .throttleDrag=${this.throttleDrag}
        .edgeDraggable=${this.edgeDraggable}
        .startDragRotate=${this.startDragRotate}
        .throttleDragRotate=${this.throttleDragRotate}
        .scalable=${this.scalable}
        .keepRatio=${this.keepRatio}
        .throttleScale=${this.throttleScale}
        .renderDirections=${this.renderDirections}
        .rotatable=${this.rotatable}
        .throttleRotate=${this.throttleRotate}
        .rotationPosition=${this.rotationPosition}
        @litDragGroup=${this.onDragGroup}
        @litScaleGroup=${this.onScaleGroup}
        @litRotateGroup=${this.onRotateGroup}
    ></lit-moveable>
</div>`;
    }
    onDragGroup({ events }) {
        events.forEach(ev => {
            ev.target.style.transform = ev.transform;
        });
    }
    onScaleGroup({ events }) {
        events.forEach(ev => {
            ev.target.style.transform = ev.drag.transform;
        });
    }
    onRotateGroup({ events }) {
        events.forEach(ev => {
            ev.target.style.transform = ev.drag.transform;
        });
    }
}