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

const CustomRotation = makeAble("customRotation", {
    render(moveable: MoveableManagerInterface<any, any>, React: Renderer): any {
        const rect = moveable.getRect();
        const { pos1, pos2 } = moveable.state;
        return React.createElement("div", {
            key: "custom-rotation",
            className: "moveable-custom-rotation",
            style: {
                position: "absolute",
                transform: `translate(-50%, -100%)` + ` translate(${(pos1[0] + pos2[0]) / 2}px, ${(pos1[1] + pos2[1]) / 2}px)` + ` rotate(${rect.rotation}deg) translateY(-20px)`,
                width: "20px",
                height: "20px",
                background: "#f55",
                cursor: "move",
                transformOrigin: "50% 100%"
            }
        }, [
            "\r\n        "
        ]);
    }
});
@customElement("lit-app")
export default class App extends LitElement {
    targetRef: Ref<HTMLDivElement> = createRef(null);
    render() {
        return html `<div class="container">
    <p>Custom Rotatation with rotationTarget</p>
    <div
        class="target"
        ${ref(this.targetRef)}
    >Target</div>
    <lit-moveable
        .target=${this.targetRef}
        .ables=${[CustomRotation]}
        .props=${{ customRotation: true
        }}
        .litDraggable=${true}
        .rotatable=${true}
        .resizable=${true}
        .rotationTarget=${".moveable-custom-rotation"}
        .rotationPosition=${"none"}
        @litDrag=${this.onDrag}
        @litResize=${this.onResize}
        @litRotate=${this.onRotate}
    ></lit-moveable>
</div>`;
    }
    onDrag(e) {
        e.target.style.transform = e.transform;
    }
    onResize(e) {
        e.target.style.width = `${e.width}px`;
        e.target.style.height = `${e.height}px`;
        e.target.style.transform = e.drag.transform;
    }
    onRotate(e) {
        e.target.style.transform = e.drag.transform;
    }
}