import { LightningElement, api } from "lwc";
import { track } from "dxUtils/analytics";
import cx from "classnames";
import { TabVariant } from "typings/custom";
import { normalizeBoolean } from "dxUtils/normalizers";

export default class Tab extends LightningElement {
    @api label: string | null = null;
    @api href: string | null = null;
    @api variant: TabVariant = "default";

    @api
    get isActive() {
        return this._isActive;
    }

    set isActive(value) {
        this._isActive = normalizeBoolean(value);
    }

    @api
    get useIcon() {
        return this._useIcon;
    }

    set useIcon(value) {
        this._useIcon = normalizeBoolean(value);
    }

    _useIcon = false;
    _isActive = false;

    private sendGtm(e: PointerEvent) {
        track(e.currentTarget!, "custEv_topNavLinkClick", {
            click_text: this.label || undefined,
            click_url: this.href || undefined,
            nav_level: "1",
            nav_item: this.label || undefined,
            element_type: "link",
            nav_type: "global"
        });

        track(e.currentTarget!, "custEv_linkClick", {
            click_text: this.label,
            element_title: this.label,
            click_url: this.href,
            element_type: "link",
            content_category: "cta"
        });
    }

    get className() {
        return cx(
            "nav-list-item",
            this.isActive && "state-active",
            `nav-list-item_${this.variant}`
        );
    }

    get iconSize() {
        return this.variant === "small" ? "xsmall" : "small";
    }
}