import Selecto from "lit-selecto";
import Moveable from "lit-moveable";
import { diff } from "@egjs/children-differ";
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 {
    @state()
    targets: Array<SVGElement | HTMLElement> = [];
    moveableRef: Ref<Moveable> = createRef(null);
    selectoRef: Ref<Selecto> = createRef(null);
    cubes: any = [];
    constructor() {
        super();
        for (let i = 0; i < 30; ++i) {
            this.cubes.push(i);
        }
    }
    render() {
        return html `<div class="root">
    <div class="container">
        <lit-moveable
            ${ref(this.moveableRef)}
            .litDraggable=${true}
            .target=${this.targets}
            @litClickGroup=${this.onClickGroup}
            @litDrag=${this.onDrag}
            @litDragGroup=${this.onDragGroup}
            @litClick=${this.onClick}
        ></lit-moveable>
        <lit-selecto
            ${ref(this.selectoRef)}
            .dragContainer=${window}
            .selectableTargets=${[".selecto-area .cube"]}
            .hitRate=${0}
            .selectByClick=${true}
            .selectFromInside=${false}
            .toggleContinueSelect=${["shift"]}
            .ratio=${0}
            @litDragStart=${this.onDragStart}
            @litSelectEnd=${this.onSelectEnd}
        ></lit-selecto>
        <div class="elements selecto-area">${this.cubes.map(i => {
            if (i === 2) {
                return html `<div
    class="cube"
    .key=${i}
>${i}</div>`;
            }
            return html `<div
    class="cube"
    .key=${i}
>${i}</div>`;
        })}</div>
        <div class="empty elements"></div>
    </div>
</div>`;
    }
    onClickGroup(e) {
        this.selectoRef.value!.clickTarget(e.inputEvent, e.inputTarget);
    }
    onDrag(e) {
        e.target.style.transform = e.transform;
    }
    onDragGroup(e) {
        e.events.forEach(ev => {
            ev.target.style.transform = ev.transform;
        });
    }
    onClick(e) {
        if (e.isDouble) {
            const inputTarget = e.inputTarget as HTMLElement;
            const selectableElements = this.selectoRef.value!.getSelectableElements();
            if (selectableElements.includes(inputTarget)) {
                this.selectoRef.value!.setSelectedTargets([inputTarget]);
                this.targets = [inputTarget];
            }
        }
    }
    onDragStart(e) {
        const moveable = this.moveableRef.value!;
        const target = e.inputEvent.target;
        if (moveable.isMoveableElement(target)
            || this.targets.some(t => t === target || t.contains(target))
        ) {
            e.stop();
        }
    }
    onSelectEnd(e) {
        const moveable = this.moveableRef.value!;
        let selected = e.selected;
        selected = selected.filter(target => {
            return selected.every(target2 => {
                return target === target2 || !target2.contains(target);
            });
        });
        const result = diff(e.startSelected, selected);
        e.currentTarget.setSelectedTargets(selected);
        if (!result.added.length && !result.removed.length) {
            return;
        }
        if (e.isDragStartEnd) {
            e.inputEvent.preventDefault();
            moveable.waitToChangeTarget().then(() => {
                moveable.dragStart(e.inputEvent);
            });
        }
        this.targets = selected;
    }
}