import { LightningElement, api } from "lwc";
import cx from "classnames";
import { toDxColor } from "dxUtils/css";
import { track } from "dxUtils/analytics";

export default class Section extends LightningElement {
    @api backgroundColor: string = "transparent";
    @api dark: boolean = false;
    @api headingLevel: "1" | "2" | "3" | "4" | "5" | "custom" = "3";
    @api label?: string;
    @api subtitle?: string;
    @api subtitleLevel?: "1" | "2" | "3" | "4" = "1";
    @api textAlign: "center" | "left" = "left";
    @api header!: string;
    @api ctaLabel?: string;
    @api ctaHref?: string;
    @api ctaBtnVariant?: string;
    @api ctaBtnSymbol?: string;
    @api ctaBtnTarget?: string = "_self";
    @api ctaBtnInline?: boolean = false;
    @api topGraphic: boolean = false;
    @api graphicOverlap: boolean = false;
    @api bottomGraphic: boolean = false;

    private get style(): string {
        return `--dx-c-section-background-color: ${toDxColor(
            this.backgroundColor
        )};`;
    }

    private get className() {
        return cx(
            "section",
            this.dark && "section-dark",
            `align-${this.textAlign}`,
            this.graphicOverlap && "graphic-overlap",
            this.bottomGraphic && "graphic-bottom",
            this.topGraphic && "graphic-top"
        );
    }

    private get subtitleClassName() {
        return cx("subtitle", `dx-text-body-${this.subtitleLevel}`);
    }

    private get headingClassName() {
        return cx(
            "heading",
            `dx-text-display-${this.headingLevel}`,
            this.ctaBtnInline && "cta-inline"
        );
    }

    private get hasText(): boolean {
        return !!(this.header || this.label || this.subtitle);
    }

    private get ctaNotInline(): boolean {
        return !this.ctaBtnInline;
    }

    private handleLabelClick(e: Event) {
        track(e.target!, "custEv_linkClick", {
            click_text: this.ctaLabel,
            element_title: this.header,
            click_url: this.ctaHref!.includes("http")
                ? this.ctaHref
                : `${window.location.origin}${this.ctaHref}`,
            element_type: "link",
            content_category: "cta"
        });
    }
}