import Moveable, { ResizableRequestParam } 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 {
    moveableRef: Ref<Moveable> = createRef(null);
    render() {
        return html `<div class="root">
    <button @click=${this.onClick}>request</button>
    <div class="input"></div>
    <div class="container">
        <div
            class="target"
            style="width: 381.609px;height: 119.416px;color: black;margin-top: 20px;margin-left: 20px;border: none;"
        >Target1</div>
        <lit-moveable
            ${ref(this.moveableRef)}
            .target=${".target"}
            .resizable=${true}
            @litResize=${this.onResize}
        ></lit-moveable>
    </div>
</div>`;
    }
    onClick() {
        this.moveableRef.value!.request<ResizableRequestParam>(
            "resizable",
            { deltaHeight: 12 },
            true
        );
    }
    onResize(e) {
        e.target.style.width = `${e.width}px`;
        e.target.style.height = `${e.height}px`;
        const input = document.querySelector(".input")!;
        input.innerHTML = JSON.stringify({
            dist: e.dist,
            width: e.width,
            height: e.height
        });
    }
}