import { LightningElement, api } from "lwc";
import cx from "classnames";
import {
    OptionWithNested,
    AnalyticsPayload,
    DropdownVariant
} from "typings/custom";
import { track } from "dxUtils/analytics";

export default class DropdownOption extends LightningElement {
    @api option!: OptionWithNested;
    @api keyValue!: string;
    @api active: boolean = false;
    @api navItemLabel: String | null = null;
    @api analyticsEvent: string | null = null;
    @api analyticsPayload?: AnalyticsPayload | undefined;
    @api indexPosition: number = 0;
    @api variant: DropdownVariant = "base";

    @api focus() {
        const option = this.template.querySelector(".option");
        if (!option) {
            return;
        }
        option.focus();
    }

    private get className(): string {
        return cx(
            "option",
            this.active && "option-active",
            this.variant && `option-${this.variant}`
        );
    }

    private get renderIndentedShape() {
        return this.variant === "indented" && this.indexPosition >= 1;
    }

    private onClick(e: PointerEvent) {
        this.dispatchEvent(
            new CustomEvent("select", { detail: this.keyValue })
        );

        if (this.analyticsEvent && e.currentTarget) {
            track(e.currentTarget, this.analyticsEvent, {
                ...(this.analyticsPayload || {}),
                click_text: this.option.label,
                click_url: this.option.link?.href,
                element_type: this.analyticsPayload?.element_type || "dropdown",
                ...(this.analyticsPayload?.nav_type
                    ? { nav_item: `${this.navItemLabel}:${this.option.label}` }
                    : {})
            });
        }
    }
}