import { LightningElement, api } from "lwc";
import cx from "classnames";

export default class Error extends LightningElement {
    @api track: boolean = false;
    @api contextPath: string = "";
    @api header: string = "";
    @api subtitle: string = "";
    @api cta?: string;
    @api image!: string;
    @api code!: string;

    get className() {
        return cx(
            "error_content",
            this.image ? "error-with-image" : "error-without-image"
        );
    }

    renderedCallback() {
        // Hide the docs header from 404 pages when URL contains /docs
        this.hideDocsHeader();

        // Track error events if tracking is enabled
        if (this.track) {
            this.trackErrorEvent();
        }
    }

    private hideDocsHeader() {
        const docsHeader = document.querySelector("doc-header") as HTMLElement;
        if (docsHeader) {
            docsHeader.style.display = "none";
        }
    }

    private trackErrorEvent() {
        const notFoundPageEl = document.querySelector(
            ".error_container"
        ) as HTMLElement;
        if (notFoundPageEl) {
            this.trackEvent(notFoundPageEl, "custEv_error", {
                error_code: this.code,
                error_message: notFoundPageEl.innerText,
                error_type: "page"
            });
        }
    }

    private trackEvent(element: Element, event: string, payload: any) {
        const TRACKING_EVENT_NAME = "developerwebsite_track";
        const LISTENER_QUEUE = "__DX_INSTRUMENTATION_QUEUE__";
        const LISTENER_INDICATOR = "__DX_INSTRUMENTATION_IS_INITIALIZED__";
        const detail = { event, payload };

        if ((window as any)[LISTENER_INDICATOR] === undefined) {
            (window as any)[LISTENER_QUEUE] =
                (window as any)[LISTENER_QUEUE] || [];
            (window as any)[LISTENER_QUEUE].push(detail);
        } else {
            const e = new CustomEvent(TRACKING_EVENT_NAME, {
                bubbles: true,
                composed: true,
                detail
            });
            element.dispatchEvent(e);
        }
    }
}