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 {
    targetRef1: Ref<HTMLInputElement> = createRef(null);
    targetRef2: Ref<HTMLDivElement> = createRef(null);
    render() {
        return html `<div class="container">
    <p>
        Input
        <button @click=${this.onClick}>Focus Input</button>
    </p>
    <input
        type="input"
        class="target1"
        ${ref(this.targetRef1)}
    ></input>
    <p>
        Content Editable
        <button @click=${this.onClick$0}>Focus contenteEditable</button>
    </p>
    <div
        class="target2"
        contentEditable="true"
        ${ref(this.targetRef2)}
        style="width: 100px;height: 100px;"
    ></div>
    <lit-moveable
        .target=${".target1"}
        .litDraggable=${true}
        .dragFocusedInput=${true}
        @litDrag=${this.onDrag}
    ></lit-moveable>
    <lit-moveable
        .target=${".target2"}
        .litDraggable=${true}
        .dragFocusedInput=${true}
        @litDrag=${this.onDrag$0}
    ></lit-moveable>
</div>`;
    }
    onClick() {
        this.targetRef1.value!.focus();
    }
    onClick$0() {
        this.targetRef2.value!.focus();
    }
    onDrag(e) {
        e.target.style.cssText += e.cssText;
    }
    onDrag$0(e) {
        e.target.style.cssText += e.cssText;
    }
}