import { deepFlat } from "@daybrush/utils";
import { NgxSelectoComponent } from "ngx-selecto";
import { MoveableTargetGroupsType, NgxMoveableComponent } from "ngx-moveable";
import { GroupManager, TargetList } from "@moveable/helper";
import { ViewChild, Component, OnInit, AfterViewInit } from "@angular/core";

@Component({ selector: "ngx-app", templateUrl: "./App.component.html" })
export default class NgxAppComponent implements OnInit, AfterViewInit {
    groupManager: GroupManager = new GroupManager([]);
    targets: MoveableTargetGroupsType = [];
    @ViewChild("moveableRef")
    moveableRef!: NgxMoveableComponent;
    @ViewChild("selectoRef")
    selectoRef!: NgxSelectoComponent;
    cubes: any = [];
    ngOnInit() {
        for (let i = 0; i < 30; ++i) {
            this.cubes.push(i);
        }
    }
    ngAfterViewInit() {
        const elements = this.selectoRef!.getSelectableElements();
        this.groupManager.set([], elements);
    }
    setSelectedTargets(nextTargetes: MoveableTargetGroupsType) {
        this.selectoRef!.setSelectedTargets(deepFlat(nextTargetes));
        this.targets = nextTargetes;
    }
    onClick() {
        const nextGroup = this.groupManager.group(this.targets, true);
        if (nextGroup) {
            this.targets = nextGroup;
        }
    }
    onClick$0() {
        const nextGroup = this.groupManager.ungroup(this.targets);
        if (nextGroup) {
            this.targets = nextGroup;
        }
    }
    onDrag(e) {
        e.target.style.transform = e.transform;
    }
    onRenderGroup(e) {
        e.events.forEach(ev => {
            ev.target.style.cssText += ev.cssText;
        });
    }
    onClickGroup(e) {
        if (!e.moveableTarget) {
            this.setSelectedTargets([]);
            return;
        }
        if (e.isDouble) {
            const childs = this.groupManager.selectSubChilds(
                this.targets,
                e.moveableTarget
            );
            this.setSelectedTargets(childs.targets());
            return;
        }
        if (e.isTrusted) {
            this.selectoRef!.clickTarget(e.inputEvent, e.moveableTarget);
        }
    }
    onDragStart(e) {
        const moveable = this.moveableRef!;
        const target = e.inputEvent.target;
        const flatted = deepFlat(this.targets);
        if (target.tagName === "BUTTON" || moveable.isMoveableElement(target)
            || flatted.some(t => t === target || t.contains(target))
        ) {
            e.stop();
        }
        e.data.startTargets = this.targets;
    }
    onSelect(e) {
        const { startAdded, startRemoved, isDragStartEnd } = e;
        if (isDragStartEnd) {
            return;
        }
        const nextChilds = this.groupManager.selectSameDepthChilds(
            e.data.startTargets,
            startAdded,
            startRemoved
        );
        this.setSelectedTargets(nextChilds.targets());
    }
    onSelectEnd(e) {
        const { isDragStartEnd, isClick, added, removed, inputEvent } = e;
        const moveable = this.moveableRef!;
        if (isDragStartEnd) {
            inputEvent.preventDefault();
            moveable.waitToChangeTarget().then(() => {
                moveable.dragStart(inputEvent);
            });
        }
        let nextChilds: TargetList;
        if (isDragStartEnd || isClick) {
            nextChilds = this.groupManager.selectCompletedChilds(
                e.data.startTargets,
                added,
                removed
            );
        } else {
            nextChilds = this.groupManager.selectSameDepthChilds(
                e.data.startTargets,
                added,
                removed
            );
        }
        e.currentTarget.setSelectedTargets(nextChilds.flatten());
        this.setSelectedTargets(nextChilds.targets());
    }
    trackBy(_, i) {
        return i;
    }
}