import { LightningElement, api } from "lwc";
import cx from "classnames";
import { Color, InternalTreeNode } from "typings/custom";

const methodTextMap: {
    [key: string]: string;
} = {
    get: "GET",
    put: "PUT",
    post: "POST",
    patch: "PATC",
    delete: "DELE"
};

const metadataBadgeColorMap: {
    [key: string]: Color;
} = {
    get: "blue",
    put: "yellow",
    post: "green",
    patch: "teal",
    delete: "red"
};

export default class TreeTile extends LightningElement {
    @api isRoot = false;
    @api treeNode!: InternalTreeNode;
    @api isExpanded = false;
    @api hasChildren = false;
    @api isSelected = false;
    @api href!: string;
    @api showArrow = false;
    @api target!: string;
    @api isExternalLink = false;

    get tileAriaLevel() {
        return this.treeNode.level + 2;
    }

    private get iconSize() {
        return "xsmall";
    }

    private get metadataBadgeColor(): string | undefined {
        if (this.treeNode.method) {
            return metadataBadgeColorMap[this.treeNode.method];
        }
        return undefined;
    }

    private get showMethod() {
        return this.treeNode.method && !this.hasChildren;
    }

    private get showForwardArrow() {
        return this.treeNode.showForwardArrow;
    }

    private get methodText() {
        if (this.treeNode.method && this.treeNode.method in methodTextMap) {
            return methodTextMap[this.treeNode.method];
        }
        return "";
    }

    // in case of multiline label, external link icon should not leave alone.
    private get modifiedLabel() {
        const label = this.treeNode.label.trim().split(" ");
        const lastWord = label.pop();

        return {
            lastWord,
            restOfLabel: label.length ? `${label.join(" ")} ` : ""
        };
    }

    private get tileClass() {
        return cx("tile", "sidebar-item", {
            "tile-root": this.isRoot,
            "tile-with-children": !this.isRoot && this.hasChildren,
            "tile-root-with-child": this.isRoot && this.showArrow,
            "sidebar-item-selected": this.isSelected
        });
    }

    private onClickIcon(event: Event) {
        event.preventDefault();
        event.stopPropagation();
        this.dispatchEvent(new CustomEvent("iconclick"));
    }
}