var ImageWidget_1,__decorate=this&&this.__decorate||function(e,t,i,r){var o,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,i):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,r);else for(var n=e.length-1;n>=0;n--)(o=e[n])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};import{AssetModelUtil as e}from"@openremote/model";import{customElement as t}from"lit/decorators.js";import{css as i,html as r,unsafeCSS as o}from"lit";import{OrAssetWidget as a}from"../util/or-asset-widget";import{ImageSettings as s}from"../settings/image-settings";import{when as n}from"lit/directives/when.js";import{DefaultColor2 as d,DefaultColor3 as l,Util as g}from"@openremote/core";import{styleMap as m}from"lit/directives/style-map.js";let styling=i`
  #img-wrapper {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    z-index: 1;
  }

  #img-container {
    position: relative;
    max-height: 100%;
  }

  #img-content {
    height: 100%;
    max-height: 100%;
    max-width: 100%;
  }

  #overlay {
    position: absolute;
    z-index: 3;

    /* additional marker styling */
    color: var(--or-app-color2, ${o(d)});
    background-color: var(--or-app-color3, ${o(l)});
    border-radius: 15px;
    padding: 3px 8px 5px 8px;
    object-fit: contain;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
`;function getDefaultWidgetConfig(){return{attributeRefs:[],showTimestampControls:!1,imagePath:"",markers:[]}}let ImageWidget=ImageWidget_1=class extends a{static getManifest(){return{displayName:"Image",displayIcon:"file-image-marker",minColumnWidth:1,minColumnHeight:1,getContentHtml:e=>new ImageWidget_1(e),getSettingsHtml:e=>new s(e),getDefaultConfig:()=>getDefaultWidgetConfig()}}refreshContent(e){this.loadAssets()}static get styles(){return[...super.styles,styling]}willUpdate(e){if(e.has("widgetConfig")&&this.widgetConfig){let e=this.widgetConfig.attributeRefs;(null==e?void 0:e.filter(e=>!this.isAttributeRefLoaded(e))).length>0&&this.loadAssets()}return super.willUpdate(e)}loadAssets(){this.fetchAssets(this.widgetConfig.attributeRefs).then(e=>{this.loadedAssets=e,this.assetAttributes=this.widgetConfig.attributeRefs.map(t=>{let i=e.findIndex(e=>e.id===t.id),r=i>=0?e[i]:void 0;return r&&r.attributes?[i,r.attributes[t.name]]:void 0}).filter(e=>!!e)})}handleMarkerPlacement(t){if(this.assetAttributes.length&&t.attributeRefs.length>0)return 0===t.markers.length?(console.error("No markers found!"),[]):t.attributeRefs.map((i,o)=>{let a,s=t.markers.find(e=>e.attributeRef.id===i.id&&e.attributeRef.name===i.name),n=this.loadedAssets.find(e=>e.id===i.id),d={left:`${s.coordinates[0]}%`,top:`${s.coordinates[1]}%`};if(n){let t=n.attributes[i.name],r=e.getAttributeAndValueDescriptors(n.type,i.name,t);a=g.getAttributeValueAsString(t,r[0],n.type,!0,"-"),(null==t?void 0:t.type)==="colourRGB"&&"-"!==a&&(d.backgroundColor=a,d.minHeight="21px",d.minWidth="13px",a=void 0)}return r`
                    <span id="overlay" style="${m(d)}">
                        ${a}
                    </span>
                `})}render(){let e=this.widgetConfig.imagePath;return r`
            <div id="img-wrapper">
                ${n(e,()=>r`
                    <div id="img-container">
                        <img id="img-content" src="${e}" alt=""/>
                        <div>
                            ${this.handleMarkerPlacement(this.widgetConfig)}
                        </div>
                    </div>
                `,()=>r`
                    <span><or-translate value="dashboard.noImageSelected"></or-translate></span>
                `)}
            </div>
        `}};ImageWidget=ImageWidget_1=__decorate([t("image-widget")],ImageWidget);export{ImageWidget};