import kebabCase from "lodash.kebabcase";
import { LightningElement, api } from "lwc";

const defaultDomain = ""; // empty domain means the header settings will be loaded from the same domain as the current page
const defaultLocale = "en-us";
const defaultHeaderSettingsBasePath = "/c/public/header-settings";
const defaultPropertyTitle = "Developers";

export default class DevExNavigation extends LightningElement {
    static renderMode = "light"; // Light DOM currently required due to other elements reading from this element's DOM; we should fix that and use existing nav CSS variables in those other elements (TODO)

    @api locale: string = defaultLocale;
    @api path: string = defaultHeaderSettingsBasePath;
    @api domain: string = defaultDomain;
    @api propertyTitle: string = defaultPropertyTitle; // used only as a fallback in the "barebones" nav

    // Fallback basic nav config used when the header settings are not available
    private get barebonesNavConfig() {
        return {
            headerSettings: {
                origin: "",
                contextNavEnabled: "true"
            },
            navItems: {
                variation: "static",
                propertyTitle: {
                    label: this.propertyTitle,
                    url: "/"
                },
                menuGroup: {}
            }
        };
    }

    async connectedCallback(): Promise<void> {
        let navConfig = null;
        try {
            const headerSettingsResponse = await fetch(
                `${this.domain}${this.path}/${this.locale}.json`,
                {
                    headers: {
                        "Content-Type": "application/json"
                    }
                }
            );
            if (headerSettingsResponse.ok) {
                navConfig = await headerSettingsResponse.json();
            }
        } catch (ex) {
            console.error(`Header settings error: ${ex}`);
        } finally {
            this.createFullNav(navConfig || this.barebonesNavConfig);
        }
    }

    private createGlobalNav(globalNavSettings: any): HTMLElement {
        const hgfNav = document.createElement("hgf-c360nav");

        Object.entries(globalNavSettings).forEach(([key, value]) => {
            if (value && typeof value === "object") {
                value = JSON.stringify(value);
            }
            hgfNav.setAttribute(kebabCase(key), value as string);
        });

        return hgfNav;
    }

    private createContextNav(contextNavData: any): HTMLElement {
        const hgfNavContext = document.createElement("hgf-c360contextnav");
        hgfNavContext.setAttribute("data", JSON.stringify(contextNavData));
        if (document.body.classList.contains("dark")) {
            hgfNavContext.setAttribute("dark-mode", "true");
        }
        return hgfNavContext;
    }

    private createFullNav(headerData: any): void {
        const hgfNav = this.createGlobalNav(headerData.headerSettings);
        const hgfNavContext = this.createContextNav(headerData.navItems);
        const containerEl = this.refs.globalNavContainer as Element;
        containerEl.appendChild(hgfNav);
        containerEl.appendChild(hgfNavContext);
    }
}