import Moveable from "lit-moveable";
import InfiniteViewer from "lit-infinite-viewer";
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 {
    viewerRef: Ref<InfiniteViewer> = createRef(null);
    scrollOptions: any = {
        container: () => this.viewerRef.value!.getContainer(),
        threshold: 20,
        getScrollPosition: () => {
            return [
                this.viewerRef.value!.getScrollLeft({ absolute: true }),
                this.viewerRef.value!.getScrollTop({ absolute: true }),
            ];
        }
    };
    render() {
        return html `<div class="container">
    <button
        class="button"
        @click=${this.onClick}
        style="position: absolute;top: 10px;right: 10px;z-index: 1;"
    >Scroll Center</button>
    <lit-infinite-viewer
        className="infinite-viewer"
        ${ref(this.viewerRef)}
    >
        <div
            class="viewport"
            style="width: 400px;height: 400px;border: 1px solid #ccc;"
        >
            <div class="target">Target</div>
            <lit-moveable
                .scrollable=${true}
                .scrollOptions=${this.scrollOptions}
                .target=${".target"}
                .litDraggable=${true}
                .resizable=${true}
                .rotatable=${true}
                @litRender=${this.onRender}
                @litScroll=${this.onScroll}
            ></lit-moveable>
        </div>
    </lit-infinite-viewer>
</div>`;
    }
    firstUpdated() {
        setTimeout(() => {
            this.viewerRef.value!.scrollCenter();
        }, 100);
    }
    onClick() {
        this.viewerRef.value!.scrollCenter();
    }
    onRender(e) {
        e.target.style.cssText += e.cssText;
    }
    onScroll({ direction }) {
        this.viewerRef.value!.scrollBy(direction[0] * 10, direction[1] * 10);
    }
}