var __decorate=this&&this.__decorate||function(t,e,i,r){var a,s=arguments.length,n=s<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,i):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,e,i,r);else for(var o=t.length-1;o>=0;o--)(a=t[o])&&(n=(s<3?a(n):s>3?a(e,i,n):a(e,i))||n);return s>3&&n&&Object.defineProperty(e,i,n),n};import{css as t,html as e}from"lit";import{customElement as i}from"lit/decorators.js";import{i18next as r}from"@openremote/or-translate";import{AssetModelUtil as a}from"@openremote/model";import{map as s}from"lit/directives/map.js";import{InputType as n}from"@openremote/or-mwc-components/or-mwc-input";import{Util as o}from"@openremote/core";import{when as d}from"lit/directives/when.js";import{AssetWidgetSettings as l}from"../util/or-asset-widget";let styling=t`
  #marker-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
`,ImageSettings=class extends l{static get styles(){return[...super.styles,styling]}willUpdate(t){super.willUpdate(t),t.has("widgetConfig")&&this.widgetConfig&&(this.updateCoordinateMap(this.widgetConfig),this.loadAssets())}loadAssets(){this.widgetConfig.attributeRefs.filter(t=>!this.isAttributeRefLoaded(t)).length>0&&this.fetchAssets(this.widgetConfig.attributeRefs).then(t=>{void 0===t?this.loadedAssets=[]:this.loadedAssets=t})}render(){return e`
            <div>
                <!-- Attributes selector -->
                <settings-panel displayName="attributes" expanded="${!0}">
                    <attributes-panel .attributeRefs="${this.widgetConfig.attributeRefs}" onlyDataAttrs="${!1}" multi="${!0}"
                                      @attribute-select="${t=>this.onAttributesSelect(t)}"
                    ></attributes-panel>
                </settings-panel>
                
                <!-- Marker coordinates -->
                <settings-panel displayName="dashboard.markerCoordinates" expanded="${!0}">
                    <div style="display: flex; flex-direction: column; gap: 8px;">
                        ${s(this.draftCoordinateEntries(this.widgetConfig),t=>t)}
                    </div>
                </settings-panel>
                
                <!-- Image settings -->
                <settings-panel displayName="dashboard.imageSettings" expanded="${!0}">
                    <div>
                        <or-mwc-input style="width: 100%;" type="${n.TEXT}" label="${r.t("dashboard.imageUrl")}" .value="${this.widgetConfig.imagePath}"
                                      @or-mwc-input-changed="${t=>this.onImageUrlUpdate(t)}"
                        ></or-mwc-input>
                    </div>
                </settings-panel>
            </div>
        `}onAttributesSelect(t){this.widgetConfig.attributeRefs=t.detail.attributeRefs,this.notifyConfigUpdate()}onImageUrlUpdate(t){this.widgetConfig.imagePath=t.detail.value,this.notifyConfigUpdate()}updateCoordinateMap(t){for(let e=0;e<t.attributeRefs.length;e++){let i=t.attributeRefs[e];if(void 0===i)return void console.error("attributeRef is undefined");-1===t.markers.findIndex(t=>t.attributeRef.id===i.id&&t.attributeRef.name===i.name)&&t.markers.push({attributeRef:i,coordinates:[50,50]})}}draftCoordinateEntries(t){return t.markers.length>0?t.attributeRefs.map(i=>{var r,s,l;let p,m=t.markers.find(t=>t.attributeRef.id===i.id&&t.attributeRef.name===i.name);if(void 0===m)return console.error("A marker could not be found during drafting coordinate entries."),e``;let f=t.markers.indexOf(m),u=m.coordinates,g=null==(r=this.loadedAssets)?void 0:r.find(t=>t.id===i.id);if(g){let t=g.attributes[i.name],e=a.getAttributeAndValueDescriptors(g.type,i.name,t);p=o.getAttributeLabel(t,e[0],g.type,!1)}return e`
                    <div id="marker-container">
                        <div style="flex: 1; display: flex; flex-direction: column;">
                            <span>${null==(l=null==(s=this.loadedAssets)?void 0:s.find(t=>t.id===i.id))?void 0:l.name}</span>
                            ${d(p,()=>e`
                                <span style="color: gray;">${p}</span>
                            `)}
                        </div>
                        <div style="display: flex; gap: 8px;">
                            <or-mwc-input .disableSliderNumberInput="${!0}" compact style="max-width: 64px;"
                                          .type="${n.NUMBER}" .min="${0}" .max="${100}" .value="${u[0]}"
                                          @or-mwc-input-changed="${t=>this.onCoordinateUpdate(f,"x",t.detail.value)}"
                            ></or-mwc-input>

                            <or-mwc-input .disableSliderNumberInput="${!0}" compact style="max-width: 64px;"
                                          .type="${n.NUMBER}" .min="${0}" .max="${100}" .value="${u[1]}"
                                          @or-mwc-input-changed="${t=>this.onCoordinateUpdate(f,"y",t.detail.value)}"
                            ></or-mwc-input>
                        </div>
                    </div>
                `}):[e`<span><or-translate value="noAttributeConnected"></or-translate></span>`]}onCoordinateUpdate(t,e,i){let r=this.widgetConfig.markers[t].coordinates;r||(r=[0,0]),"x"===e?r[0]=i:"y"===e&&(r[1]=i),this.widgetConfig.markers[t].coordinates=r,this.notifyConfigUpdate()}};ImageSettings=__decorate([i("image-settings")],ImageSettings);export{ImageSettings};