import { LightningElement, api } from "lwc";
import { TreeNode, InternalTreeNode } from "typings/custom";
import { toJson } from "dxUtils/normalizers";
import { TreeHandler } from "./treeHandler";

export default class Tree extends LightningElement {
    @api
    get treeRoot() {
        return this._treeRoot!;
    }

    set treeRoot(value: TreeNode | string) {
        value = toJson(value);
        this._treeHandler = new TreeHandler();
        this._treeRoot = this._treeHandler.initialize(value as TreeNode);
        if (this._value) {
            this.selectedKey = this._treeHandler.getKeyByName(this._value);
            this._treeHandler.expandToSelected(this.selectedKey);
        }
    }

    @api
    get value() {
        return this._value!;
    }

    set value(value: string) {
        if (this._value === value) {
            return;
        }

        this._value = value;
        if (this._treeHandler) {
            this.selectedKey = this._treeHandler.getKeyByName(value);
            this._treeHandler.expandToSelected(this.selectedKey);
        }
    }

    private _treeRoot?: InternalTreeNode = undefined;
    private _treeHandler!: TreeHandler;
    private _value?: string = undefined;
    private selectedKey?: string = undefined;

    onTileSelected(event: CustomEvent) {
        event.stopPropagation();

        const { isExternalLink } = event.detail;
        if (!isExternalLink) {
            const { key, name } = event.detail;
            this._value = name;
            this.selectedKey = key;
            this.dispatchEvent(
                new CustomEvent("select", {
                    detail: { name },
                    composed: true,
                    bubbles: true
                })
            );
        }
    }

    onExpandCollapse(event: CustomEvent) {
        event.stopPropagation();

        const node = this._treeHandler.getNode(event.detail.key);
        if (node) {
            node.isExpanded = !node.isExpanded;
        }
        const { name, isSelectAction, isExpanded } = event.detail;
        this.dispatchEvent(
            new CustomEvent("expandcollapse", {
                detail: { name, isSelectAction, isExpanded },
                composed: true,
                bubbles: true
            })
        );
    }

    onRegister(event: CustomEvent<{ key: string; setExpanded: Function }>) {
        event.stopPropagation();
        this._treeHandler.registerSetExpanded(event.detail);
    }
}