var MapSettings_1,__decorate=this&&this.__decorate||function(t,e,i,s){var o,n=arguments.length,a=n<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,i,s);else for(var l=t.length-1;l>=0;l--)(o=t[l])&&(a=(n<3?o(a):n>3?o(e,i,a):o(e,i))||a);return n>3&&a&&Object.defineProperty(e,i,a),a},__awaiter=this&&this.__awaiter||function(t,e,i,s){return new(i||(i=Promise))(function(o,n){function a(t){try{r(s.next(t))}catch(t){n(t)}}function l(t){try{r(s.throw(t))}catch(t){n(t)}}function r(t){var e;t.done?o(t.value):((e=t.value)instanceof i?e:new i(function(t){t(e)})).then(a,l)}r((s=s.apply(t,e||[])).next())})};import{css as t,html as e}from"lit";import{customElement as i}from"lit/decorators.js";import{AssetWidgetSettings as s}from"../util/or-asset-widget";import{InputType as o}from"@openremote/or-mwc-components/or-mwc-input";import{LngLat as n}from"@openremote/or-map";import"../panels/assettypes-panel";import"../panels/thresholds-panel";import{when as a}from"lit/directives/when.js";import l from"@openremote/core";import{showSnackbar as r}from"@openremote/or-mwc-components/or-mwc-snackbar";let styling=t`
  .switchMwcInputContainer {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
`,MapSettings=MapSettings_1=class extends s{static get styles(){return[...super.styles,styling]}render(){return e`
            <div>
                <!-- Map settings -->
                <settings-panel displayName="configuration.mapSettings" expanded="${!0}">
                    <div style="display: flex; flex-direction: column; gap: 8px;">
                        <!-- Zoom level -->
                        <or-vaadin-number-field value=${this.widgetConfig.zoom} min="0" @change=${t=>this.onZoomUpdate(t)}>
                            <or-translate slot="label" value="dashboard.zoom"></or-translate>
                        </or-vaadin-number-field>
                        <or-vaadin-text-field value=${this.widgetConfig.center?Object.values(this.widgetConfig.center)[0]+", "+Object.values(this.widgetConfig.center)[1]:void 0}
                                              @change=${t=>this.onCenterUpdate(t)}>
                            <or-translate slot="label" value="dashboard.center"></or-translate>
                        </or-vaadin-text-field>
                        <div style="display: flex; justify-content: space-between; align-items: center;">
                            <span><or-translate value="dashboard.showGeoJson"></or-translate></span>
                            <or-mwc-input .type="${o.SWITCH}" style="width: 70px;"
                                          .value="${this.widgetConfig.showGeoJson}"
                                          @or-mwc-input-changed="${t=>this.onGeoJsonToggle(t)}"
                            ></or-mwc-input>
                        </div>
                    </div>
                </settings-panel>

                <!-- Panel where Asset type and the selected attribute can be customized -->
                <settings-panel displayName="attributes" expanded="${!0}">
                    <assettypes-panel .assetType="${this.widgetConfig.assetType}" .attributeNames="${[this.widgetConfig.attributeName]}" .config="${MapSettings_1._config}"
                                      .allOfType="${this.widgetConfig.allOfType}" .assetIds="${this.widgetConfig.assetIds}"
                                      @assettype-select="${t=>this.onAssetTypeSelect(t)}"
                                      @alloftype-switch="${t=>this.onAssetAllOfTypeSwitch(t)}"
                                      @assetids-select="${t=>this.onAssetIdsSelect(t)}"
                                      @attributenames-select="${t=>this.onAttributeNameSelect(t)}"
                    ></assettypes-panel>

                    <!-- Other settings like labels and units-->
                    <div>
                        <div class="switchMwcInputContainer">
                            <span><or-translate value="dashboard.showLabels"></or-translate></span>
                            <or-mwc-input .type="${o.SWITCH}" style="width: 70px;"
                                          .value="${this.widgetConfig.showLabels}" .disabled="${!this.widgetConfig.assetType}"
                                          @or-mwc-input-changed="${t=>this.onShowLabelsToggle(t)}"
                            ></or-mwc-input>
                        </div>
                        <div class="switchMwcInputContainer">
                            <span><or-translate value="dashboard.showUnits"></or-translate></span>
                            <or-mwc-input .type="${o.SWITCH}" style="width: 70px;"
                                          .value="${this.widgetConfig.showUnits}" .disabled="${!this.widgetConfig.showLabels||!this.widgetConfig.assetType}"
                                          @or-mwc-input-changed="${t=>this.onShowUnitsToggle(t)}"
                            ></or-mwc-input>
                        </div>
                    </div>
                </settings-panel>

                <!-- List of customizable thresholds -->
                ${a(this.widgetConfig.attributeName,()=>e`
                    <settings-panel displayName="thresholds" expanded="${!0}">
                        <thresholds-panel .thresholds="${this.widgetConfig.thresholds}"
                                          .boolColors="${this.widgetConfig.boolColors}"
                                          .textColors="${this.widgetConfig.textColors}"
                                          .valueType="${this.widgetConfig.valueType}" style="padding-bottom: 12px;"
                                          .min="${this.widgetConfig.min}" .max="${this.widgetConfig.max}"
                                          @threshold-change="${t=>this.onThresholdsChange(t)}"
                                          @bool-colors-change="${t=>this.onBoolColorsChange(t)}"
                                          @text-colors-change="${t=>this.onTextColorsChange(t)}">
                        </thresholds-panel>
                    </settings-panel>
                `)}
            </div>
        `}onZoomUpdate(t){let e=t.currentTarget;e.checkValidity()&&(this.widgetConfig.zoom=Number(e.value),this.notifyConfigUpdate())}onCenterUpdate(t){let e=t.currentTarget;if(e.checkValidity())if(e.value){let t=e.value.split(/[, ]/).filter(t=>!!t);if(2===t.length){let e=new n(Number.parseFloat(t[0]),Number.parseFloat(t[1]));this.widgetConfig.center=e,this.notifyConfigUpdate()}}else this.widgetConfig.center=void 0,this.notifyConfigUpdate()}onGeoJsonToggle(t){this.widgetConfig.showGeoJson=t.detail.value,this.notifyConfigUpdate()}onAssetTypeSelect(t){this.widgetConfig.assetType!==t.detail&&(this.widgetConfig.attributeName=void 0,this.widgetConfig.assetIds=[],this.widgetConfig.showLabels=!1,this.widgetConfig.showUnits=!1,this.widgetConfig.boolColors={type:"boolean",false:"#ef5350",true:"#4caf50"},this.widgetConfig.textColors=[["example1","#4caf50"],["example2","#ff9800"]],this.widgetConfig.thresholds=[[0,"#4caf50"],[75,"#ff9800"],[90,"#ef5350"]],this.widgetConfig.assetType=t.detail,this.notifyConfigUpdate())}onAssetAllOfTypeSwitch(t){this.widgetConfig.allOfType=t.detail,this.notifyConfigUpdate()}onAssetIdsSelect(t){this.widgetConfig.assetIds=t.detail,this.notifyConfigUpdate()}onAttributeNameSelect(t){return __awaiter(this,void 0,void 0,function*(){let e=t.detail[0];if(this.widgetConfig.attributeName!==e){this.widgetConfig.attributeName=e;let t=t=>__awaiter(this,void 0,void 0,function*(){var i;try{let s=yield l.rest.api.AssetResource.queryAssets({realm:{name:l.displayRealm},select:{attributes:[e,"location"]},types:[this.widgetConfig.assetType],ids:t,limit:null!=(i=null==t?void 0:t.length)?i:1});if(this.widgetConfig.assetIds=(null==t?void 0:t.length)?s.data.map(t=>t.id):[],this.widgetConfig.valueType=s.data.length?s.data[0].attributes[e].type:"text",!s.data[0].attributes[e].type)throw TypeError("Data does not contain property 'attributes' or 'type'.")}catch(t){console.error(t),t instanceof TypeError?r(void 0,"noAttributesToShow"):r(void 0,"errorOccurred")}});this.widgetConfig.allOfType?yield t():yield t(this.widgetConfig.assetIds),this.notifyConfigUpdate()}})}onShowLabelsToggle(t){this.widgetConfig.showLabels=t.detail.value,this.notifyConfigUpdate()}onShowUnitsToggle(t){this.widgetConfig.showUnits=t.detail.value,this.notifyConfigUpdate()}onThresholdsChange(t){this.widgetConfig.thresholds=t.detail,this.notifyConfigUpdate()}onBoolColorsChange(t){this.widgetConfig.boolColors=t.detail,this.notifyConfigUpdate()}onTextColorsChange(t){this.widgetConfig.textColors=t.detail,this.notifyConfigUpdate()}};MapSettings._allowedValueTypes=["boolean","number","integer","positiveInteger","positiveNumber","negativeInteger","negativeNumber","text"],MapSettings._config={assets:{enabled:!0,multi:!0,allOfTypeOption:!0},attributes:{enabled:!0,valueTypes:MapSettings_1._allowedValueTypes}},MapSettings=MapSettings_1=__decorate([i("map-settings")],MapSettings);export{MapSettings};