import { DraggableRequestParam, NgxMoveableComponent } from "ngx-moveable";
import { NgxSelectoComponent } from "ngx-selecto";
import { ViewChild, Component } from "@angular/core";

@Component({ selector: "ngx-app", templateUrl: "./App.component.html" })
export default class NgxAppComponent {
    @ViewChild("moveableRef")
    moveableRef!: NgxMoveableComponent;
    targets: Array<HTMLElement | SVGElement> = [];
    onClick() {
        const rect = this.moveableRef!.getRect();
        const moveables = this.moveableRef!.getMoveables();
        if (moveables.length <= 1) {
            return;
        }
        moveables.forEach(child => {
            child.request<DraggableRequestParam>("draggable", {
                y: rect.top
            }, true);
        });
    }
    onClick$0() {
        const rect = this.moveableRef!.getRect();
        const moveables = this.moveableRef!.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!.getRect();
        const moveables = this.moveableRef!.getMoveables();
        if (moveables.length <= 1) {
            return;
        }
        moveables.forEach(child => {
            child.request<DraggableRequestParam>("draggable", {
                x: rect.left
            }, true);
        });
    }
    onClick$2() {
        const rect = this.moveableRef!.getRect();
        const moveables = this.moveableRef!.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!.getRect();
        const moveables = this.moveableRef!.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!.getRect();
        const moveables = this.moveableRef!.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!.getRect();
        const moveables = this.moveableRef!.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!.getRect();
        const moveables = this.moveableRef!.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!;
        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!;
        if (e.isDragStart) {
            e.inputEvent.preventDefault();
            moveable.waitToChangeTarget().then(() => {
                moveable.dragStart(e.inputEvent);
            });
        }
        this.targets = e.selected;
    }
}