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