var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
define(["require", "exports", "TemplatesCommonLib/functionality/esriWidgetUtils", "./utils/esriWidgetUtils", "TemplatesCommonLib/functionality/positionManager", "TemplatesCommonLib/baseClasses/support/itemUtils", "TemplatesCommonLib/baseClasses/support/domHelper", "TemplatesCommonLib/structuralFunctionality/t9nUtils", "esri/core/promiseUtils", "TemplatesCommonLib/structuralFunctionality/telemetry/telemetry", "./ConfigurationSettings", "esri/core/Handles", "./ui/Layout", "./ui/MobilePanel", "./ui/Panel", "esri/core/promiseUtils", "esri/core/reactiveUtils", "esri/geometry/support/jsonUtils", "esri/core/urlUtils", "esri/widgets/Search", "./utils/popupUtils", "./utils/themeUtils", "./utils/utils", "TemplatesCommonLib/functionality/highlight", "esri/core/accessorSupport/decorators", "esri/intl", "esri/widgets/Popup", "esri/geometry", "TemplatesCommonLib/structuralFunctionality/language-switcher/LanguageSwitcher", "TemplatesCommonLib/structuralFunctionality/landing-page/LandingPage", "TemplatesCommonLib/functionality/configurationSettings"], function (require, exports, esriWidgetUtils_1, esriWidgetUtils_2, positionManager_1, itemUtils_1, domHelper_1, t9nUtils_1, promiseUtils_1, telemetry_1, ConfigurationSettings_1, Handles_1, Layout_1, MobilePanel_1, Panel_1, promiseUtils_2, reactiveUtils_1, jsonUtils_1, urlUtils_1, Search_1, popupUtils_1, themeUtils_1, utils_1, highlight_1, decorators_1, intl_1, Popup_1, geometry_1, LanguageSwitcher_1, LandingPage_1, configurationSettings_1) {
    "use strict";
    telemetry_1 = __importDefault(telemetry_1);
    ConfigurationSettings_1 = __importDefault(ConfigurationSettings_1);
    Handles_1 = __importDefault(Handles_1);
    Layout_1 = __importDefault(Layout_1);
    MobilePanel_1 = __importDefault(MobilePanel_1);
    Panel_1 = __importDefault(Panel_1);
    Search_1 = __importDefault(Search_1);
    Popup_1 = __importDefault(Popup_1);
    LanguageSwitcher_1 = __importDefault(LanguageSwitcher_1);
    LandingPage_1 = __importDefault(LandingPage_1);
    const SEARCH_PARAMS = new URL(window.location.href)?.searchParams;
    class Sidebar {
        constructor() {
            this._handles = null;
            this._appConfig = null;
            this._mobilePanel = null;
            this._panel = null;
            this._telemetry = null;
            this.view = null;
            this._page = null;
            //--------------------------------------------------------------------------
            //
            //  Public Methods
            //
            //--------------------------------------------------------------------------
            this.bundleName = "sidebar/app/t9n/common";
        }
        async init(base) {
            if (!base) {
                console.error("ApplicationBase is not defined");
                return;
            }
            this._handles = new Handles_1.default();
            (0, promiseUtils_1.eachAlways)([
                (0, t9nUtils_1.handleT9N)("sidebar", "sidebar", "sidebar/app/t9n/common"),
                (0, t9nUtils_1.handleT9N)("instant", "instant", "instant/../t9n/common")
            ]).then((results) => {
                const [appBundle, bundle] = results;
                base.config.bundle = bundle?.value;
                base.config.appBundle = appBundle?.value;
                this._base = base;
                this._createApp();
            });
        }
        _createApp() {
            const { config, results } = this._base;
            if (config?.exportPDF) {
                config.exportToPDF = config.exportPDF;
            }
            this._appConfig = new ConfigurationSettings_1.default(config);
            this._appConfig.base = this._base;
            (0, themeUtils_1.updateThemeConfig)(this._appConfig);
            this.createTelemetry();
            const { webMapItems } = results;
            if (config.legend && !this._appConfig.legendPanel) {
                this._appConfig.legendPanel = config.legend;
            }
            this.handleThemeUpdates();
            let item = null;
            webMapItems.forEach((response) => {
                if (response?.value?.id === this._appConfig?.webmap) {
                    item = response.value;
                }
                else if (this._appConfig?.webmap === "default") {
                    item = response.value;
                }
            });
            if (!item) {
                // show error page
                document.location.href = `../../shared/unavailable/index.html?appid=${config?.appid ?? null}`;
                return;
            }
            const layout = new Layout_1.default({
                applicationBase: this._base,
                applicationConfig: this._appConfig,
                item,
                container: document.getElementById("appContainer")
            });
            const layoutHandle = layout.watch("view", () => {
                layoutHandle.remove();
                const view = layout.view;
                this.view = view;
                (0, intl_1.onLocaleChange)(async () => {
                    this._appConfig.bundle = await (0, intl_1.fetchMessageBundle)("instant/../t9n/common");
                    this._appConfig.appBundle = await (0, intl_1.fetchMessageBundle)("sidebar/app/t9n/common");
                });
                this._setupPositioning(view, this._appConfig);
                (0, itemUtils_1.setImageryLayerHighlightOptions)(view);
                this?.view?.when(() => {
                    const { find, marker } = config;
                    const promises = [(0, itemUtils_1.findQuery)(find, view), (0, itemUtils_1.goToMarker)(marker, view)];
                    Promise.all(promises).then(async () => {
                        const hiddenLayers = SEARCH_PARAMS?.get("hiddenLayers")?.split(";");
                        if (hiddenLayers)
                            (0, itemUtils_1.setHiddenLayers)(this._appConfig.hiddenLayers, this?.view);
                        const selectedFeature = SEARCH_PARAMS?.get("selectedFeature")?.split(";");
                        if (selectedFeature && !this._appConfig?.popupPanel) {
                            (0, itemUtils_1.findSelectedFeature)(this._appConfig.selectedFeature, this?.view);
                        }
                        this._initialExtent = this.view.extent.clone();
                        this._initialScale = view.scale;
                        this._initialRotation = view.rotation;
                    });
                });
                this._addTitle();
                // watch for option/cmd + m key
                document.addEventListener("keydown", (e) => {
                    if (e?.altKey && e?.code === "KeyM") {
                        this?.view?.focus();
                    }
                });
                if (this._isHoverMobile()) {
                    this._appConfig.popupHover = false;
                }
                this._handlePopupBehavior(view);
                this._handles.add([
                    (0, reactiveUtils_1.watch)(() => [
                        this._appConfig?.highlightColor,
                        this._appConfig?.enableHighlightColor,
                        this._appConfig?.enableHighlightHaloColor,
                        this._appConfig.highlightHaloColor
                    ], () => {
                        const { highlightColor, highlightHaloColor, enableHighlightColor, enableHighlightHaloColor } = this._appConfig;
                        const highlightConfig = {
                            enableHighlightColor,
                            highlightColor,
                            enableHighlightHaloColor,
                            highlightHaloColor
                        };
                        (0, highlight_1.handleHighlightColors)(highlightConfig, view);
                    }, { initial: true })
                ]);
                // change zoom level if configured with
                // search scale
                view?.popup?.on("trigger-action", (event) => {
                    const { searchScale, enableFeatureSearchScale, popupPanel } = this._appConfig;
                    if (event?.action?.id === "zoom-to-feature" && enableFeatureSearchScale && searchScale) {
                        const selectedFeature = view.popup.selectedFeature;
                        const goToProps = (0, utils_1.createGoToProps)(selectedFeature, this._appConfig, view);
                        if (selectedFeature && popupPanel) {
                            this.view.goTo(goToProps).catch(() => { });
                        }
                        else {
                            this.view.popup.goToOverride = (view, goToParams) => {
                                return view.goTo(goToProps).catch();
                            };
                        }
                    }
                });
                // Add widgets and side panel
                const widgetProps = {
                    view,
                    config: this._appConfig,
                    portal: this._base.portal,
                    telemetry: this._telemetry
                };
                this._languageSwitcher = new LanguageSwitcher_1.default({
                    base: this._base,
                    configurationSettings: this._appConfig,
                    view,
                    expandTooltip: this._appConfig?.appBundle.tools.languageSwitcher,
                    collapseTooltip: this._appConfig?.appBundle.tools.languageSwitcherClose,
                    messageBundleName: "sidebar/app/t9n/common",
                    collapseTooltipKey: "tools.languageSwitcherClose",
                    expandTooltipKey: "tools.languageSwitcher",
                    handles: this._handles
                });
                this._landingPage = new LandingPage_1.default({
                    base: this._base,
                    container: document.createElement("div"),
                    configurationSettings: this._appConfig,
                    handles: this._handles,
                    portal: this._base.portal
                });
                document.addEventListener("selectedLanguageUpdated", async (e) => {
                    // Update the popup if one is visible so arcade expressions are applied '
                    if (view?.popup?.selectedFeature) {
                        const location = view?.popup?.location;
                        if (location) {
                            view.popup.close();
                            view.popup.open({
                                fetchFeatures: true,
                                location
                            });
                        }
                    }
                });
                this._handles.add([
                    (0, reactiveUtils_1.watch)(() => [this?._appConfig?.landingPage, this?._appConfig?.bundle, this?._appConfig?.coverPage], () => {
                        (0, esriWidgetUtils_2.addReturnToCoverPageButton)(this._appConfig, view, this._appConfig?.bundle, this._landingPage, "bottom-right" // Hardcoded position
                        );
                    }, { initial: true }),
                    (0, reactiveUtils_1.watch)(() => [this?._appConfig?.localeSwitcher, this?._appConfig?.languageSwitcher], () => {
                        // Don't add locale switcher if Language switcher is configured
                        if (this._appConfig?.languageSwitcher)
                            return;
                        (0, esriWidgetUtils_2.addLocaleSwitcher)({ ...widgetProps, ...{ propertyName: "localeSwitcher" } });
                    }, {
                        initial: true
                    }),
                    (0, reactiveUtils_1.watch)(() => [this._appConfig?.orientedImagery], () => {
                        if (this._appConfig?.orientedImagery) {
                            this._telemetry?.logEvent({
                                category: "Sidebar",
                                action: "Oriented Imagery",
                                label: "Oriented Imagery",
                                attribute: this._appConfig?.appid ?? "",
                                details: `Oriented Imagery:${this._appConfig?.orientedImagery}`
                            });
                        }
                    }, { initial: true }),
                    (0, reactiveUtils_1.watch)(() => [this._appConfig?.utilityNetwork], () => {
                        if (this._appConfig?.utilityNetwork === true && !this?._base?.portal?.isPortal) {
                            // add notice if within config experience
                            if ((0, configurationSettings_1.isWithinConfigurationExperience)()) {
                                const notice = document.createElement("calcite-notice");
                                notice.open = true;
                                notice.closable = true;
                                notice.classList.add("utility-network-notice");
                                notice.kind = "danger";
                                notice.scale = "l";
                                notice.width = "full";
                                notice.icon = "information";
                                const messageDiv = document.createElement("div");
                                messageDiv.slot = "message";
                                messageDiv.innerHTML = this?._appConfig?.appBundle?.utilNetworkDeprecationNotice;
                                notice.appendChild(messageDiv);
                                document.body.appendChild(notice);
                            }
                        }
                    }, { initial: true }),
                    (0, reactiveUtils_1.watch)(() => [
                        this?._appConfig?.customUrlParam,
                        this?._appConfig?.urlParamAsFilter,
                        this?._appConfig?.customURLParamName
                    ], (newValue, oldValue) => {
                        const { urlParamAsFilter, customURLParamName } = this._appConfig;
                        const customUrlParam = this._appConfig.customUrlParam?.layers?.[0];
                        const fieldName = customUrlParam?.fields?.[0];
                        const subLayerId = customUrlParam?.sublayerId;
                        if (!customUrlParam || !customURLParamName || !fieldName) {
                            return;
                        }
                        view.when(() => {
                            this._initialRotation = view?.rotation || 0;
                            let layer = view.map.findLayerById(customUrlParam.id);
                            layer?.load()?.then(() => {
                                if (subLayerId >= 0 && layer?.type === "map-image") {
                                    layer = layer.findSublayerById(subLayerId);
                                }
                                if (!layer)
                                    return;
                                const href = this._appConfig.withinConfigurationExperience
                                    ? document.referrer
                                    : document.location.href;
                                const searchResults = (0, urlUtils_1.urlToObject)(href);
                                let searchTerm = null;
                                if (searchResults?.query) {
                                    if (customURLParamName in searchResults.query) {
                                        searchTerm = searchResults.query[customURLParamName];
                                    }
                                }
                                if (!urlParamAsFilter && searchTerm) {
                                    const layerSearchSource = {
                                        layer,
                                        searchFields: customUrlParam.fields,
                                        outFields: ["*"],
                                        exactMatch: true,
                                        displayField: fieldName
                                    };
                                    if (layer) {
                                        const search = new Search_1.default({
                                            view,
                                            resultGraphicEnabled: false,
                                            searchAllEnabled: false,
                                            includeDefaultSources: false,
                                            suggestionsEnabled: false,
                                            sources: [layerSearchSource],
                                            searchTerm
                                        });
                                        search.search().then((r) => {
                                            let geometry = view?.popup?.location;
                                            const searchResults = r?.results[0];
                                            searchResults?.results?.forEach((result) => {
                                                geometry = result.feature.geometry;
                                            });
                                            const goToProps = (0, utils_1.createGoToProps)(geometry, this._appConfig, view);
                                            view.goTo(goToProps).catch();
                                        });
                                    }
                                }
                                if (urlParamAsFilter && searchTerm) {
                                    if (layer && urlParamAsFilter) {
                                        if (layer.hasOwnProperty("definitionExpression") && searchTerm && fieldName) {
                                            const l = layer;
                                            let field = null;
                                            l?.fields?.some((val) => {
                                                if (val.name === fieldName) {
                                                    field = val;
                                                    return true;
                                                }
                                                else {
                                                    return false;
                                                }
                                            });
                                            let definitionExpression = `${fieldName} = ${decodeURI(searchTerm)}`;
                                            if (field.type === "string") {
                                                definitionExpression = `${fieldName} = '${decodeURI(searchTerm)}'`;
                                            }
                                            l.definitionExpression = definitionExpression;
                                            l.definitionExpression = `${fieldName} = '${decodeURI(searchTerm)}'`;
                                            const q = l.createQuery();
                                            l.queryExtent(q).then((e) => {
                                                if (e?.extent)
                                                    view.goTo(e?.extent).catch();
                                            });
                                        }
                                    }
                                }
                            });
                        });
                    }, { initial: true }),
                    (0, reactiveUtils_1.watch)(() => [this._appConfig?.applyCustomTheme, this._appConfig?.customTheme], () => {
                        let { customTheme } = this._appConfig;
                        const sharedThemeProps = this?._base?.portal?.portalProperties?.sharedTheme;
                        if (customTheme?.applySharedTheme && !customTheme?.logo && sharedThemeProps?.logo?.small) {
                            customTheme.logo = sharedThemeProps.logo.small;
                        }
                        if (this._appConfig?.applySharedTheme && !this?._appConfig?.customTheme) {
                            this._appConfig.customTheme = {
                                applySharedTheme: true
                            };
                        }
                        (0, themeUtils_1.handleCustomTheme)(this._appConfig);
                    }, { initial: true }),
                    (0, reactiveUtils_1.watch)(() => this._appConfig?.disableScroll, () => {
                        widgetProps.propertyName = "disableScroll";
                        (0, esriWidgetUtils_2.addOverlay)(widgetProps);
                    }, { initial: true }),
                    (0, reactiveUtils_1.watch)(() => [this?._appConfig?.mapArea, this?._appConfig?.mapAreaConfig], () => {
                        if (this._appConfig?.mapArea === true && this._appConfig.mapAreaConfig) {
                            if (this._appConfig.mapAreaConfig != null) {
                                const viewPointToUse = {
                                    ...this._appConfig.mapAreaConfig,
                                    targetGeometry: geometry_1.Point.fromJSON(this._appConfig.mapAreaConfig.targetGeometry)
                                };
                                const searchParams = new URL(window.location.href)?.searchParams;
                                const center = searchParams?.get("center");
                                const level = searchParams?.get("level");
                                if (center && level)
                                    return;
                                view.when(() => {
                                    view.goTo(viewPointToUse.targetGeometry).then(() => {
                                        view.scale = viewPointToUse.scale;
                                        view.rotation = viewPointToUse?.rotation ?? this?._initialRotation;
                                    });
                                });
                            }
                        }
                        else if (this._appConfig?.mapArea === false) {
                            // if mapArea is false, reset to initial extent
                            view.when(() => {
                                if (this?._initialExtent) {
                                    view.goTo(this._initialExtent).then(() => {
                                        view.scale = this._initialScale;
                                        view.rotation = this._initialRotation;
                                    });
                                }
                            });
                        }
                    }, { initial: true }),
                    (0, reactiveUtils_1.watch)(() => [this._appConfig?.extentSelector, this._appConfig?.extentSelectorConfig, this._appConfig?.mapArea], () => {
                        this.handleExtentChanges(view);
                    }, { initial: true }),
                    (0, reactiveUtils_1.watch)(() => this?._appConfig?.fullScreen, () => {
                        (0, esriWidgetUtils_2.addFullscreen)({
                            ...widgetProps,
                            ...{ propertyName: "fullScreen" }
                        });
                    }, {
                        initial: true
                    }),
                    (0, reactiveUtils_1.watch)(() => this?._appConfig?.fullScreenPosition, () => {
                        (0, esriWidgetUtils_2.addFullscreen)({
                            ...widgetProps,
                            ...{ propertyName: "fullScreenPosition" }
                        });
                    }, {
                        initial: true
                    }),
                    (0, reactiveUtils_1.watch)(() => [this._appConfig?.mapZoom, this?._appConfig?.mapZoomPosition], () => {
                        if (view?.ui?.find("zoom"))
                            view.ui.remove("zoom");
                        (0, esriWidgetUtils_1.addZoom)(config, view);
                    }, { initial: true }),
                    (0, reactiveUtils_1.watch)(() => [
                        this._appConfig?.keyboardShortcuts,
                        this._appConfig?.bundle,
                        this._appConfig?.keyboardShortcutsPosition
                    ], () => {
                        (0, esriWidgetUtils_1.addKeyboardShortcuts)(this._appConfig, view, this._appConfig.bundle);
                    }, { initial: true }),
                    (0, reactiveUtils_1.watch)(() => [this?._appConfig?.compassWidget, this._appConfig?.compassWidgetPosition], () => {
                        (0, esriWidgetUtils_1.addCompass)(this._appConfig, view);
                    }, {
                        initial: true
                    }),
                    (0, reactiveUtils_1.watch)(() => [
                        this?._appConfig?.home,
                        this?._appConfig?.homePosition,
                        this?._appConfig?.mapArea,
                        this?._appConfig?.mapAreaConfig
                    ], () => {
                        (0, esriWidgetUtils_1.addHome)(this._appConfig, view);
                    }, {
                        initial: true
                    }),
                    (0, reactiveUtils_1.watch)(() => [this?._appConfig?.locateWidget, this?._appConfig?.locateWidgetPosition], () => {
                        (0, esriWidgetUtils_1.addLocateWidget)(this._appConfig, view);
                    }, {
                        initial: true
                    }),
                    (0, reactiveUtils_1.watch)(() => [this._appConfig?.scalebar, this._appConfig?.scalebarDualMode, this._appConfig?.scalebarPosition], () => {
                        (0, esriWidgetUtils_1.addScaleBar)(this._appConfig, view);
                    }, { initial: true }),
                    (0, reactiveUtils_1.watch)(() => this._appConfig?.splash, () => {
                        widgetProps.propertyName = "splash";
                        (0, esriWidgetUtils_2.addSplash)(widgetProps);
                    }, { initial: true }),
                    (0, reactiveUtils_1.watch)(() => this._appConfig?.splashButtonIcon, () => {
                        widgetProps.propertyName = "splashButtonIcon";
                        (0, esriWidgetUtils_2.addSplash)(widgetProps);
                    }),
                    (0, reactiveUtils_1.watch)(() => this._appConfig?.splashFullScreen, () => {
                        widgetProps.propertyName = "splashFullScreen";
                        (0, esriWidgetUtils_2.addSplash)(widgetProps);
                    }),
                    (0, reactiveUtils_1.watch)(() => this._appConfig?.splashButtonPosition, () => {
                        widgetProps.propertyName = "splashButtonPosition";
                        (0, esriWidgetUtils_2.addSplash)(widgetProps);
                    }),
                    (0, reactiveUtils_1.watch)(() => this._appConfig?.splashButtonText, () => {
                        widgetProps.propertyName = "splashButtonText";
                        (0, esriWidgetUtils_2.addSplash)(widgetProps);
                    }),
                    (0, reactiveUtils_1.watch)(() => this._appConfig?.info, () => {
                        widgetProps.propertyName = "info";
                        (0, esriWidgetUtils_2.addSplash)(widgetProps);
                    }),
                    (0, reactiveUtils_1.watch)(() => this._appConfig?.detailsOpenAtStart, () => {
                        widgetProps.propertyName = "detailsOpenAtStart";
                        (0, esriWidgetUtils_2.addSplash)(widgetProps);
                    }),
                    (0, reactiveUtils_1.watch)(() => [
                        this._appConfig?.search,
                        this?._appConfig?.searchConfiguration,
                        this?._appConfig?.searchPosition,
                        this?._appConfig?.searchOpenAtStart,
                        this?._appConfig?.extentSelector,
                        this?._appConfig?.extentSelectorConfig,
                        this?._appConfig?.bundle
                    ], () => {
                        (0, esriWidgetUtils_1.addSearch)(this._appConfig, view, this._appConfig?.bundle);
                    }, { initial: true }),
                    (0, reactiveUtils_1.watch)(() => [this?._appConfig?.basemapToggle], () => {
                        (0, esriWidgetUtils_2.addBasemap)({
                            ...widgetProps,
                            ...{ propertyName: "basemapToggle" }
                        });
                    }, {
                        initial: true
                    }),
                    (0, reactiveUtils_1.watch)(() => [this?._appConfig?.basemapTogglePosition], () => {
                        (0, esriWidgetUtils_2.addBasemap)({
                            ...widgetProps,
                            ...{ propertyName: "basemapTogglePosition" }
                        });
                    }, {
                        initial: true
                    }),
                    (0, reactiveUtils_1.watch)(() => [this?._appConfig?.nextBasemap], () => {
                        (0, esriWidgetUtils_2.addBasemap)({ ...widgetProps, ...{ propertyName: "nextBasemap" } });
                    }, {
                        initial: true
                    }),
                    (0, reactiveUtils_1.watch)(() => [this?._appConfig?.basemapSelector], () => {
                        (0, esriWidgetUtils_2.addBasemap)({
                            ...widgetProps,
                            ...{ propertyName: "basemapSelector" }
                        });
                    }, {
                        initial: true
                    }),
                    (0, reactiveUtils_1.watch)(() => this._appConfig?.share, () => {
                        widgetProps.propertyName = "share";
                        (0, esriWidgetUtils_2.addShare)(widgetProps);
                    }, { initial: true }),
                    (0, reactiveUtils_1.watch)(() => this._appConfig?.shareIncludeSocial, () => {
                        widgetProps.propertyName = "shareIncludeSocial";
                        (0, esriWidgetUtils_2.addShare)(widgetProps);
                    }),
                    (0, reactiveUtils_1.watch)(() => this._appConfig?.shareIncludeEmbed, () => {
                        widgetProps.propertyName = "shareIncludeEmbed";
                        (0, esriWidgetUtils_2.addShare)(widgetProps);
                    }),
                    (0, reactiveUtils_1.watch)(() => this._appConfig?.theme, () => {
                        widgetProps.propertyName = "theme";
                        (0, esriWidgetUtils_2.addShare)(widgetProps);
                    }),
                    (0, reactiveUtils_1.watch)(() => this._appConfig?.header, () => {
                        widgetProps.propertyName = "header";
                        (0, esriWidgetUtils_2.addShare)(widgetProps);
                    }),
                    (0, reactiveUtils_1.watch)(() => this?._appConfig?.measure, () => {
                        (0, esriWidgetUtils_2.addMeasurement)({ ...widgetProps, ...{ propertyName: "measure" } });
                    }, {
                        initial: true
                    }),
                    (0, reactiveUtils_1.watch)(() => this?._appConfig?.measureOpenAtStart, () => {
                        (0, esriWidgetUtils_2.addMeasurement)({
                            ...widgetProps,
                            ...{ propertyName: "measureOpenAtStart" }
                        });
                    }, {
                        initial: true
                    }),
                    (0, reactiveUtils_1.watch)(() => this?._appConfig?.measurePosition, () => {
                        (0, esriWidgetUtils_2.addMeasurement)({
                            ...widgetProps,
                            ...{ propertyName: "measurePosition" }
                        });
                    }, {
                        initial: true
                    }),
                    (0, reactiveUtils_1.watch)(() => this?._appConfig?.coordinateFormats, () => {
                        (0, esriWidgetUtils_2.addMeasurement)({
                            ...widgetProps,
                            ...{ propertyName: "coordinateFormats" }
                        });
                    }, {
                        initial: true
                    }),
                    (0, reactiveUtils_1.watch)(() => this?._appConfig?.measureAreaUnit, () => {
                        (0, esriWidgetUtils_2.addMeasurement)({
                            ...widgetProps,
                            ...{ propertyName: "measureAreaUnit" }
                        });
                    }, {
                        initial: true
                    }),
                    (0, reactiveUtils_1.watch)(() => this?._appConfig?.measureLinearUnit, () => {
                        (0, esriWidgetUtils_2.addMeasurement)({
                            ...widgetProps,
                            ...{ propertyName: "measureLinearUnit" }
                        });
                    }, {
                        initial: true
                    }),
                    (0, reactiveUtils_1.watch)(() => this._appConfig?.exportToPDF, () => {
                        (0, esriWidgetUtils_2.addExportPDF)({ ...widgetProps, ...{ propertyName: "exportToPDF" } });
                    }, { initial: true }),
                    (0, reactiveUtils_1.watch)(() => this._appConfig?.exportButtonIcon, () => {
                        (0, esriWidgetUtils_2.addExportPDF)({ ...widgetProps, ...{ propertyName: "exportButtonIcon" } });
                    }, { initial: true }),
                    (0, reactiveUtils_1.watch)(() => this._appConfig?.header, () => {
                        (0, esriWidgetUtils_2.addExportPDF)({ ...widgetProps, ...{ propertyName: "header" } });
                    }, { initial: true }),
                    ...this._languageSwitcher.getLanguageSwitcherHandles(widgetProps),
                    (0, reactiveUtils_1.watch)(() => this._appConfig?.languageSwitcherPosition, () => {
                        const group = (0, utils_1.getPosition)(this._appConfig?.languageSwitcherPosition);
                        this._languageSwitcher.setExpandGroup(group);
                    }, { initial: true })
                ], this?._appConfig?.localeSwitcher ? "" : "configuration");
                const shell = layout.calciteShell;
                this._handles.add((0, reactiveUtils_1.watch)(() => [view.resizing], () => {
                    this.createPanel(view, shell);
                }, { initial: true }));
            });
        }
        _openPopup(view, e) {
            if (!view)
                return;
            const location = view.toMap(e);
            try {
                if (!location && view)
                    return;
                view.popup.open({
                    updateLocationEnabled: false,
                    location,
                    view,
                    fetchFeatures: true
                });
                (0, popupUtils_1.updatePopup)(view);
            }
            catch (error) { }
        }
        _isHoverMobile() {
            return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ? true : false;
        }
        _addTitle() {
            let { title } = this._appConfig;
            const map = this?.view?.map;
            if (!title) {
                title = this?._base?.results?.applicationItem?.value?.title
                    ? this?._base?.results?.applicationItem?.value?.title
                    : map?.portalItem?.title;
            }
            this._appConfig.title = title;
            (0, domHelper_1.setPageTitle)(title);
            this._handles.add((0, reactiveUtils_1.watch)(() => this._appConfig?.title, domHelper_1.setPageTitle, { initial: true }), "configuration");
        }
        _handlePopupBehavior(view) {
            //enable browse features for clusters
            view.popup = new Popup_1.default();
            if (view?.popup?.viewModel)
                view.popup.viewModel.browseClusterEnabled = view?.popup?.viewModel?.selectedFeature?.isAggregate;
            this._handles.add((0, reactiveUtils_1.watch)(() => [this._appConfig?.popupHover, this._appConfig?.popupPanel], () => {
                const { popupHover, popupPanel } = this._appConfig;
                if (!popupHover) {
                    if (this?._handles) {
                        this._handles.remove("popupHover");
                    }
                    (0, popupUtils_1.updatePopup)(view);
                }
                else if (popupHover && !popupPanel) {
                    (0, popupUtils_1.findPopupAction)(view, "popup-hover-action");
                    if (popupHover) {
                        const popupHoverAction = {
                            id: "popup-hover-action",
                            image: "./assets/pushpin.png",
                            title: this._appConfig.appBundle.hoverPopupTip,
                            visible: true
                        };
                        view.popup.actions.add(popupHoverAction);
                        (0, intl_1.onLocaleChange)((e) => {
                            view?.popup?.actions?.forEach((action) => {
                                if (action?.id === "popup-hover-action") {
                                    t9nUtils_1.autoUpdatedStrings.add({
                                        obj: action,
                                        property: "title",
                                        bundleName: this.bundleName,
                                        key: "hoverPopupTip"
                                    });
                                }
                            });
                        });
                    }
                    // create the handle
                    const popup = view?.popup || new Popup_1.default();
                    popup.visibleElements = { spinner: false };
                    view.popupEnabled = false;
                    popup.defaultPopupTemplateEnabled = true;
                    let lastHitTest;
                    let click = false;
                    this._handles.add(view.on("pointer-move", (0, promiseUtils_2.debounce)((e) => {
                        if (view.popupEnabled === true) {
                            return;
                        }
                        if (lastHitTest)
                            clearTimeout(lastHitTest);
                        // if they click let's open popup and stop hover
                        this._handles.add(view.on("click", () => {
                            view.popupEnabled = true;
                            click = true;
                            (0, popupUtils_1.updatePopup)(view);
                            (0, reactiveUtils_1.whenOnce)(() => popup?.visible === false).then(() => {
                                if (popupHover) {
                                    view.popupEnabled = false;
                                    click = false;
                                }
                            });
                        }), "popupHover");
                        lastHitTest = setTimeout(() => {
                            if (!click && !this?._appConfig?.measuring)
                                this._openPopup(view, e);
                        }, 100);
                    })), "popupHover");
                    (0, reactiveUtils_1.watch)(() => view.popup?.selectedFeature, () => {
                        (0, popupUtils_1.updatePopup)(view);
                    }, { initial: true });
                }
            }, { initial: true }), "configuration");
        }
        createPanel(view, shell) {
            const props = {
                applicationConfig: this._appConfig,
                applicationBase: this._base,
                view
            };
            const width = window.innerWidth;
            // Mobile Panel Creation
            if (width <= 700) {
                if (shell?.contains(this._mobilePanel?.container)) {
                    return;
                }
                if (!this._mobilePanel) {
                    const container = document.createElement("div");
                    container.classList.add("mobile-shell-panel");
                    this._mobilePanel = new MobilePanel_1.default({
                        ...props,
                        container
                    });
                }
                this.updatePanel("mobile", shell);
            }
            else {
                // If already desktop return
                if (shell?.contains(this._panel?.container))
                    return;
                if (!this._panel) {
                    const container = document.createElement("calcite-shell-panel");
                    container.classList.add("desktop-shell-panel");
                    this._panel = new Panel_1.default({
                        ...props,
                        container
                    });
                }
                this.updatePanel("desktop", shell);
            }
        }
        updatePanel(type, shell) {
            const panelToAdd = type === "mobile" ? this._mobilePanel : this._panel;
            const panelToRemove = type === "mobile" ? this._panel : this._mobilePanel;
            if (!shell?.contains(panelToAdd?.container))
                shell.appendChild(panelToAdd.container);
            if (shell?.contains(panelToRemove?.container))
                shell.removeChild(panelToRemove.container);
        }
        async updateAppTheme(theme) {
            const style = document.getElementById("esri-stylesheet");
            style.href =
                style.href.indexOf("light") !== -1 ? style.href.replace(/light/g, theme) : style.href.replace(/dark/g, theme);
            // toggle calcite light/dark class
            const inverseTheme = theme === "light" ? "dark" : "light";
            const container = document.getElementById("appContainer");
            container.classList.add(`calcite-mode-${theme}`);
            const elements = document.getElementsByClassName(`calcite-mode-${inverseTheme}`);
            for (let i = 0; i < elements.length; i++) {
                const node = elements[i];
                node.classList.remove(`calcite-mode-${inverseTheme}`);
                node.classList.add(`calcite-mode-${theme}`);
            }
            this?.view?.when(() => {
                const uiDiv = document.getElementsByClassName("esri-ui")[0];
                uiDiv?.classList.add(`calcite-mode-${theme}`);
                uiDiv?.classList.remove(`calcite-mode-${inverseTheme}`);
            });
        }
        handleExtentChanges(view) {
            // IGNORE INITIAL EXTENT IF SEARCH PARAMS ARE PRESENT
            const searchParams = new URL(window.location.href)?.searchParams;
            const center = searchParams?.get("center");
            const zoom = searchParams?.get("level");
            if (this._appConfig?.extentSelector && this._appConfig.extentSelectorConfig && this._appConfig?.mapArea) {
                const constraints = this._appConfig?.extentSelectorConfig?.constraints || null;
                const geometry = constraints?.geometry;
                if (geometry) {
                    const extent = (0, jsonUtils_1.fromJSON)(geometry);
                    if (extent && (extent?.type === "extent" || extent?.type === "polygon")) {
                        constraints.geometry = extent;
                        if (!center && !zoom && !this._appConfig?.mapArea) {
                            view.goTo(extent, { animate: false }).catch(() => { });
                        }
                    }
                    else {
                        constraints.geometry = null;
                    }
                }
                constraints.minScale = +constraints.minScale;
                constraints.maxScale = +constraints.maxScale;
                view.constraints = constraints;
                this._setMapViewRotation(view);
            }
            else {
                if (this._initialExtent) {
                    if (!center && !zoom) {
                        view.goTo(this._initialExtent, { animate: false }).catch();
                    }
                }
            }
        }
        handleThemeUpdates() {
            if (!this._appConfig.theme) {
                this._appConfig.theme = window.matchMedia("(prefers-color-scheme: dark)") ? "dark" : "light";
            }
            this._handles.add[((0, reactiveUtils_1.watch)(() => this._appConfig?.theme, this.updateAppTheme, { initial: true }),
                (0, reactiveUtils_1.watch)(() => this._appConfig?.panelSize, () => {
                    const panelSize = this._appConfig.panelSize;
                    document.body.classList.remove("panel-m");
                    document.body.classList.contains("panel-l");
                    document.body.classList.contains("panel-s");
                    document.body.classList.add(`panel-${panelSize}`);
                }, { initial: true }),
                (0, reactiveUtils_1.watch)(() => this._appConfig?.customCSS, () => {
                    this._handleCustomCSS();
                }, { initial: true }),
                "configuration")];
        }
        async createTelemetry() {
            // add alert to container
            const { portal } = this._base;
            const appName = this._base.config?.telemetry?.name;
            const telemTS = new telemetry_1.default({
                portal,
                config: this._appConfig,
                messages: {
                    optIn: this._appConfig?.bundle?.analyticsOptIn
                },
                appName
            });
            (0, reactiveUtils_1.whenOnce)(() => telemTS.instance !== undefined).then(() => {
                if (telemTS?.instance != null) {
                    this._telemetry = telemTS.instance;
                    this._telemetry?.logPageView(`${window.location.pathname}${window.location.search}`);
                }
            });
        }
        _handleCustomCSS() {
            const customCSSStyleSheet = document.getElementById("customCSS");
            if (customCSSStyleSheet) {
                customCSSStyleSheet.remove();
            }
            const styles = document.createElement("style");
            styles.id = "customCSS";
            const styleTextNode = document.createTextNode(this._appConfig.customCSS);
            styles.appendChild(styleTextNode);
            document.head.appendChild(styles);
        }
        _setMapViewRotation(view) {
            const mapRotation = this._appConfig?.extentSelectorConfig?.mapRotation ?? this._initialRotation ?? null;
            if (!view?.constraints?.rotationEnabled) {
                // if rotation is disabled
                view.constraints.rotationEnabled = true; // set rotation to enabled
                view.rotation = mapRotation; // set rotation value
                view.constraints.rotationEnabled = false; // set rotation back to disabled
            }
            else {
                if (view)
                    view.rotation = mapRotation;
            }
        }
        _setupPositioning(view, config) {
            let positionKeyLookup = new Map();
            positionKeyLookup.set("exportPDF", "exportToPDF");
            positionKeyLookup.set("shareMap", "share");
            positionKeyLookup.set("esri-language-switcher", "languageSwitcher");
            positionKeyLookup.set("esri-fullscreen", "fullScreen");
            positionKeyLookup.set("searchExpand", "search");
            positionKeyLookup.set("infoExpand", "info");
            positionKeyLookup.set("esri-zoom", "mapZoom");
            positionKeyLookup.set("esri-scale-bar", "scalebar");
            positionKeyLookup.set("esri-searchExpand", "search");
            positionKeyLookup.set("esri-compass", "compassWidget");
            positionKeyLookup.set("esri-home", "home");
            positionKeyLookup.set("esri-locate", "locateWidget");
            positionKeyLookup.set("esri-instant-apps-keyboard-shortcuts", "keyboardShortcuts");
            positionKeyLookup.set("basemapWidget", "basemapToggle");
            positionKeyLookup.set("measureExpand", "measure");
            (0, positionManager_1.assertWidgetOrdering)(view, config, positionKeyLookup, false);
        }
    }
    __decorate([
        (0, decorators_1.property)()
    ], Sidebar.prototype, "bundleName", void 0);
    return Sidebar;
});