/* eslint-disable @lwc/lwc/no-document-query */
import { LightningElement, api } from "lwc";
import type { OptionWithLink } from "typings/custom";
import { toJson } from "dxUtils/normalizers";
import get from "lodash.get";
import { track } from "dxUtils/analytics";

const MOBILE_SIZE_MATCH = "768px";

export default class SidebarFooterNav extends LightningElement {
    @api langValuePath: string = "id";
    @api bailHref?: string | null = null;
    @api bailLabel?: string | null = null;

    @api
    get languages() {
        return this._languages;
    }

    set languages(value) {
        this._languages = toJson(value);
    }

    @api
    get language() {
        return this._language;
    }

    set language(value) {
        this._language = value;
    }

    private _languages!: OptionWithLink[];
    private _language: string | null = null;
    private mobile: boolean = false;
    private matchMedia!: MediaQueryList;

    private get hasLanguages(): boolean {
        return this.languages?.length > 1;
    }

    private get languageLabel(): string {
        const matchingLanguageData = this.language
            ? this.languages.find(
                  (lang) => get(lang, this.langValuePath) === this.language
              )
            : null;
        return matchingLanguageData?.label || this.languages[0].label;
    }

    get hasBailLink(): boolean {
        return !!(this.bailHref && this.bailLabel);
    }

    private onLangChange(event: CustomEvent<string>): void {
        const { detail } = event;
        this._language = detail;

        this.dispatchEvent(
            new CustomEvent("langchange", {
                detail,
                bubbles: true,
                composed: true
            })
        );
    }

    private getFilename = function (path: string) {
        return path.substring(path.lastIndexOf("/") + 1);
    };

    private handleBailClick(event: Event) {
        const payload = {
            click_text: "pdf",
            click_url: this.bailHref,
            element_title: "pdf",
            element_type: "link",
            content_category: "download"
        };
        track(event.target!, "custEv_pdfDownload", {
            ...payload,
            file_name: this.getFilename(this.bailHref!),
            file_extension: "pdf"
        });

        track(event.target!, "custEv_linkClick", {
            ...payload
        });
    }

    connectedCallback() {
        this.matchMedia = window.matchMedia(
            `(max-width: ${MOBILE_SIZE_MATCH})`
        );
        this.onMediaChange(this.matchMedia);
        this.matchMedia.addEventListener("change", this.onMediaChange);
    }

    disconnectedCallback() {
        this.matchMedia.removeEventListener("change", this.onMediaChange);
    }

    private onMediaChange = (event: MediaQueryListEvent | MediaQueryList) => {
        this.mobile = event.matches;
    };
}