import Moveable from "lit-moveable";
import { LitElement, html } from "lit";
import { customElement, property } from "lit/decorators.js";
import { ref, createRef } from "lit/directives/ref.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";
    resizable: any = "$preview_resizable";
    keepRatio: any = "$preview_keepRatio";
    throttleResize: any = "$preview_throttleResize";
    renderDirections: any = "$preview_renderDirections";
    rotatable: any = "$preview_rotatable";
    throttleRotate: any = "$preview_throttleRotate";
    rotationPosition: any = "$preview_rotationPosition";
    minWidth: any = "$preview_minWidth";
    minHeight: any = "$preview_minHeight";
    maxWidth: any = "$preview_maxWidth";
    maxHeight: any = "$preview_maxHeight";
    moveableRef: Ref<Moveable> = createRef(null);
    render() {
        return html `<div class="container">
    <button @click=${this.onClick}>Resize</button>
    <div class="target target1">Target1</div>
    <div
        class="target target2"
        style="min-width: 50px;min-height: 50px;"
    >Target2</div>
    <div class="target target3">Target3</div>
    <lit-moveable
        ${ref(this.moveableRef)}
        .target=${".target"}
        .hideChildMoveableDefaultLines=${this.hideChildMoveableDefaultLines}
        .litDraggable=${this.draggable}
        .throttleDrag=${this.throttleDrag}
        .edgeDraggable=${this.edgeDraggable}
        .startDragRotate=${this.startDragRotate}
        .throttleDragRotate=${this.throttleDragRotate}
        .resizable=${this.resizable}
        .keepRatio=${this.keepRatio}
        .throttleResize=${this.throttleResize}
        .renderDirections=${this.renderDirections}
        .rotatable=${this.rotatable}
        .throttleRotate=${this.throttleRotate}
        .rotationPosition=${this.rotationPosition}
        @litDragGroup=${this.onDragGroup}
        @litResizeGroupStart=${this.onResizeGroupStart}
        @litResizeGroup=${this.onResizeGroup}
        @litRotateGroup=${this.onRotateGroup}
    ></lit-moveable>
</div>`;
    }
    onClick() {
        this.moveableRef.value!.updateRect();
    }
    onDragGroup({ events }) {
        events.forEach(ev => {
            ev.target.style.transform = ev.transform;
        });
    }
    onResizeGroupStart({ setMin, setMax }) {
        setMin([this.minWidth, this.minHeight]);
        setMax([this.maxWidth, this.maxHeight]);
    }
    onResizeGroup({ events }) {
        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({ events }) {
        events.forEach(ev => {
            ev.target.style.transform = ev.drag.transform;
        });
    }
}