import Moveable, { DraggableRequestParam } from "lit-moveable";
import Selecto from "lit-selecto";
import { LitElement, html } from "lit";
import { customElement, property, state } 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);
    @state()
    targets: Array<HTMLElement | SVGElement> = [];
    render() {
        return html `<div class="root">
    <div class="container">
        <button @click=${this.onClick}>Align Top</button>
        &nbsp;
        <button @click=${this.onClick$0}>Align Bottom</button>
        &nbsp;
        <button @click=${this.onClick$1}>Align Left</button>
        &nbsp;
        <button @click=${this.onClick$2}>Align Right</button>
        &nbsp;
        <button @click=${this.onClick$3}>Align Vertical Center</button>
        &nbsp;
        <button @click=${this.onClick$4}>Align Horizontal Center</button>
        &nbsp;
        <button @click=${this.onClick$5}>Arrange Vertical Spacing</button>
        &nbsp;
        <button @click=${this.onClick$6}>Arrange Horizontal Spacing</button>
        &nbsp;
        <div
            class="target target1"
            style="left: 50px;top: 150px;"
        >Target1</div>
        <div
            class="target target2"
            style="left: 250px;top: 250px;"
        >Target2</div>
        <div
            class="target target3"
            style="left: 400px;top: 300px;"
        >Target3</div>
        <lit-moveable
            ${ref(this.moveableRef)}
            .target=${this.targets}
            .litDraggable=${true}
            .resizable=${true}
            .snappable=${true}
            .snapGridWidth=${50}
            @litRender=${this.onRender}
            @litRenderGroup=${this.onRenderGroup}
        ></lit-moveable>
        <lit-selecto
            .dragContainer=${window}
            .selectableTargets=${[".target"]}
            .hitRate=${0}
            .selectByClick=${true}
            .selectFromInside=${true}
            .toggleContinueSelect=${["shift"]}
            .ratio=${0}
            @litDragStart=${this.onDragStart}
            @litSelectEnd=${this.onSelectEnd}
        ></lit-selecto>
    </div>
</div>`;
    }
    onClick() {
        const rect = this.moveableRef.value!.getRect();
        const moveables = this.moveableRef.value!.getMoveables();
        if (moveables.length <= 1) {
            return;
        }
        moveables.forEach(child => {
            child.request<DraggableRequestParam>("draggable", {
                y: rect.top
            }, true);
        });
    }
    onClick$0() {
        const rect = this.moveableRef.value!.getRect();
        const moveables = this.moveableRef.value!.getMoveables();
        if (moveables.length <= 1) {
            return;
        }
        moveables.forEach(child => {
            child.request<DraggableRequestParam>("draggable", {
                y: rect.top + rect.height
            }, true);
        });
    }
    onClick$1() {
        const rect = this.moveableRef.value!.getRect();
        const moveables = this.moveableRef.value!.getMoveables();
        if (moveables.length <= 1) {
            return;
        }
        moveables.forEach(child => {
            child.request<DraggableRequestParam>("draggable", {
                x: rect.left
            }, true);
        });
    }
    onClick$2() {
        const rect = this.moveableRef.value!.getRect();
        const moveables = this.moveableRef.value!.getMoveables();
        if (moveables.length <= 1) {
            return;
        }
        moveables.forEach(child => {
            child.request<DraggableRequestParam>("draggable", {
                y: rect.left + rect.width
            }, true);
        });
    }
    onClick$3() {
        const rect = this.moveableRef.value!.getRect();
        const moveables = this.moveableRef.value!.getMoveables();
        if (moveables.length <= 1) {
            return;
        }
        moveables.forEach((child, i) => {
            child.request<DraggableRequestParam>("draggable", {
                y: rect.top + rect.height / 2 - rect.children![i].height / 2
            }, true);
        });
    }
    onClick$4() {
        const rect = this.moveableRef.value!.getRect();
        const moveables = this.moveableRef.value!.getMoveables();
        if (moveables.length <= 1) {
            return;
        }
        moveables.forEach((child, i) => {
            child.request<DraggableRequestParam>("draggable", {
                x: rect.left + rect.width / 2 - rect.children![i].width / 2
            }, true);
        });
    }
    onClick$5() {
        const groupRect = this.moveableRef.value!.getRect();
        const moveables = this.moveableRef.value!.getMoveables();
        let top = groupRect.top;
        if (moveables.length <= 1) {
            return;
        }
        const gap = (groupRect.height - groupRect.children!.reduce(
            (prev, cur) => {
                return prev + cur.height;
            },
            0
        )) / (moveables.length - 1);
        moveables.sort((a, b) => {
            return a.state.top - b.state.top;
        });
        moveables.forEach(child => {
            const rect = child.getRect();
            child.request<DraggableRequestParam>("draggable", {
                y: top
            }, true);
            top += rect.height + gap;
        });
    }
    onClick$6() {
        const groupRect = this.moveableRef.value!.getRect();
        const moveables = this.moveableRef.value!.getMoveables();
        let left = groupRect.left;
        if (moveables.length <= 1) {
            return;
        }
        const gap = (groupRect.width - groupRect.children!.reduce(
            (prev, cur) => {
                return prev + cur.width;
            },
            0
        )) / (moveables.length - 1);
        moveables.sort((a, b) => {
            return a.state.left - b.state.left;
        });
        moveables.forEach(child => {
            const rect = child.getRect();
            child.request<DraggableRequestParam>("draggable", {
                x: left
            }, true);
            left += rect.width + gap;
        });
    }
    onRender(e) {
        e.target.style.cssText += e.cssText;
    }
    onRenderGroup(e) {
        e.events.forEach(ev => {
            ev.target.style.cssText += ev.cssText;
        });
    }
    onDragStart(e) {
        const moveable = this.moveableRef.value!;
        const target = e.inputEvent.target;
        if (target.tagName === "BUTTON" || moveable.isMoveableElement(target)
            || this.targets.some(t => t === target || t.contains(target))
        ) {
            e.stop();
        }
    }
    onSelectEnd(e) {
        const moveable = this.moveableRef.value!;
        if (e.isDragStart) {
            e.inputEvent.preventDefault();
            moveable.waitToChangeTarget().then(() => {
                moveable.dragStart(e.inputEvent);
            });
        }
        this.targets = e.selected;
    }
}