var __decorate=this&&this.__decorate||function(t,e,i,r){var o,s=arguments.length,a=s<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,i):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,i,r);else for(var l=t.length-1;l>=0;l--)(o=t[l])&&(a=(s<3?o(a):s>3?o(e,i,a):o(e,i))||a);return s>3&&a&&Object.defineProperty(e,i,a),a},__awaiter=this&&this.__awaiter||function(t,e,i,r){return new(i||(i=Promise))(function(o,s){function a(t){try{n(r.next(t))}catch(t){s(t)}}function l(t){try{n(r.throw(t))}catch(t){s(t)}}function n(t){var e;t.done?o(t.value):((e=t.value)instanceof i?e:new i(function(t){t(e)})).then(a,l)}n((r=r.apply(t,e||[])).next())})};import{css as t,html as e,LitElement as i,unsafeCSS as r}from"lit";import{customElement as o,property as s,state as a}from"lit/decorators.js";import{AssetModelUtil as l}from"@openremote/model";import{style as n}from"../style";import{when as c}from"lit/directives/when.js";import{map as u}from"lit/directives/map.js";import{guard as b}from"lit/directives/guard.js";import{styleMap as p}from"lit/directives/style-map.js";import{i18next as d}from"@openremote/or-translate";import"@openremote/or-translate";import{InputType as m}from"@openremote/or-mwc-components/or-mwc-input";import h,{DefaultColor5 as f,Util as v}from"@openremote/core";import{getAssetDescriptorIconTemplate as A}from"@openremote/or-icon";import{OrAssetAttributePicker as y,OrAssetAttributePickerPickedEvent as g}from"@openremote/or-attribute-picker";import{showDialog as w}from"@openremote/or-mwc-components/or-mwc-dialog";import{showSnackbar as _}from"@openremote/or-mwc-components/or-mwc-snackbar";export class AttributeActionEvent extends CustomEvent{constructor(t,e,i){super(AttributeActionEvent.NAME,{bubbles:!0,composed:!0,detail:{asset:t,attributeRef:e,action:i}})}}AttributeActionEvent.NAME="attribute-action";export class AttributesSelectEvent extends CustomEvent{constructor(t,e){super(AttributesSelectEvent.NAME,{bubbles:!0,composed:!0,detail:{assets:t,attributeRefs:e}})}}AttributesSelectEvent.NAME="attribute-select";let styling=t`
    #attribute-list {
        overflow: auto;
        flex: 1 1 0;
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .attribute-list-item {
        position: relative;
        cursor: pointer;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: stretch;
        gap: 0 10px;
        padding: 0;
        min-height: 50px;
    }

    .attribute-list-item-icon {
        display: flex;
        align-items: center;
        --or-icon-width: 20px;
        min-height: 50px;
    }

    .attribute-list-item-label {
        display: flex;
        justify-content: center;
        flex: 1 1 0;
        line-height: 16px;
        flex-direction: column;
        overflow: hidden;
        white-space: nowrap;
    }
    
    .attribute-list-item-label > * {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .attribute-list-item-actions {
        justify-content: end;
        align-items: center;
        display: flex;
        position: absolute;
        visibility: hidden;
        gap: 8px;
    }

    .attribute-list-item-bullet {
        width: 14px;
        height: 14px;
        border-radius: 7px;
        margin-right: 10px;
    }

    .attribute-list-item .button.delete {
        display: none;
    }

    .attribute-list-item:hover .button.delete {
        display: block;
    }

    .button-action {
        background: none;
        visibility: hidden;
        color: var(--or-app-color5, ${r(f)});
        --or-icon-fill: var(--or-app-color5, ${r(f)});
        display: inline-block;
        border: none;
        padding: 0;
        cursor: pointer;
    }

    .attribute-list-item:hover .attribute-list-item-actions {
        visibility: visible;
        position: unset;
        background: white;
        z-index: 1;
    }

    .attribute-list-item:hover .button-action {
        visibility: visible;
    }

    .button-action[disabled] {
        opacity: 0.5;
        cursor: initial;
    }

    .button-action:hover {
        --or-icon-fill: var(--or-icon-fill--hover, var(--or-app-color4));
    }
`,AttributesPanel=class extends i{constructor(){super(...arguments),this.attributeRefs=[],this.multi=!1,this.onlyDataAttrs=!1,this.loadedAssets=[]}static get styles(){return[styling,n]}willUpdate(t){super.willUpdate(t),this.attributeRefs||(this.attributeRefs=[]),t.has("attributeRefs")&&this.attributeRefs&&this.loadAssets().then(e=>{t.get("attributeRefs")&&this.dispatchEvent(new AttributesSelectEvent(e,this.attributeRefs))})}getLoadedAsset(t){var e;return null==(e=this.loadedAssets)?void 0:e.find(e=>e.id===t.id)}removeWidgetAttribute(t){null!=this.attributeRefs&&(this.attributeRefs=this.attributeRefs.filter(e=>e!==t))}loadAssets(){return __awaiter(this,void 0,void 0,function*(){if(!(this.attributeRefs.filter(t=>!this.getLoadedAsset(t)).length>0))return this.loadedAssets;{let t=yield this.fetchAssets(this.attributeRefs);return this.loadedAssets=t,t}})}fetchAssets(){return __awaiter(this,arguments,void 0,function*(t=[]){let e=[];return yield h.rest.api.AssetResource.queryAssets({ids:t.map(t=>t.id),realm:{name:h.displayRealm},select:{attributes:t.map(t=>t.name)}}).then(t=>{e=t.data}).catch(t=>{console.error(t),_(void 0,"errorOccurred")}),e})}onAttributeActionClick(t,e,i){this.dispatchEvent(new AttributeActionEvent(t,e,i))}openAttributeSelector(t,e,i=!0,r){(null!=t?w(new y().setMultiSelect(e).setSelectedAttributes(t).setShowOnlyDatapointAttrs(i).setAttributeFilter(r)):w(new y().setMultiSelect(e).setShowOnlyDatapointAttrs(i))).addEventListener(g.NAME,t=>{this.attributeRefs=t.detail})}render(){return e`
            <div>
                ${c(this.attributeRefs.length>0,()=>e`

                    <div id="attribute-list">
                        ${b([this.attributeRefs,this.loadedAssets,this.attributeActionCallback,this.attributeLabelCallback],()=>e`
                            ${u(this.attributeRefs,t=>{let i=this.getLoadedAsset(t);if(i){let r=i.attributes[t.name],o=l.getAttributeAndValueDescriptors(i.type,t.name,r),s=v.getAttributeLabel(r,o[0],i.type,!0);return e`
                                        <div class="attribute-list-item">
                                            <div class="attribute-list-item-icon">
                                                ${c(!!this.attributeIconCallback,()=>this.attributeIconCallback(i,r,l.getAssetDescriptor(i.type)),()=>e`<span>${A(l.getAssetDescriptor(i.type))}</span>`)}
                                            </div>
                                            <div class="attribute-list-item-label">
                                                ${c(!!this.attributeLabelCallback,()=>this.attributeLabelCallback(i,r,s),()=>e`
                                                            <span>${i.name}</span>
                                                            <span style="color:grey;">${s}</span>
                                                        `)}
                                            </div>
                                            ${this._getAttributeActionsTemplate(i,t)}
                                        </div>
                                    `}})}
                        `)}
                    </div>

                `,()=>e`
                    <span style="padding: 14px 0; display: block;"><or-translate value="noAttributesConnected"></or-translate></span>
                `)}

                <!-- Button that opens attribute selection -->
                <or-mwc-input .type="${m.BUTTON}" label="attribute" icon="${this.multi||0===this.attributeRefs.length?"plus":"swap-horizontal"}"
                              style="margin-top: 8px;"
                              @or-mwc-input-changed="${()=>this.openAttributeSelector(this.attributeRefs,this.multi,this.onlyDataAttrs,this.attributeFilter)}">
                </or-mwc-input>
            </div>
        `}_getAttributeActionsTemplate(t,i){return e`
            <div class="attribute-list-item-actions">
                <!-- Custom actions defined by callback -->
                ${c(!!this.attributeActionCallback,()=>this.attributeActionCallback(i).map(e=>this._getAttributeActionTemplate(e,t,i)))}
                <!-- Remove attribute button -->
                <button class="button-action" title="${d.t("delete")}" @click="${()=>this.removeWidgetAttribute(i)}">
                    <or-icon icon="close-circle"></or-icon>
                </button>
            </div>
        `}_getAttributeActionTemplate(t,i,r){var o,s;let a=p({"--or-icon-fill":t.active&&null!=(o=null==t?void 0:t.color)?o:"inherit","--or-icon-fill--hover":null!=(s=null==t?void 0:t.color)?s:"unset"});return e`
            <button class="button-action" .disabled="${t.disabled}" title="${t.tooltip}" style=${a}
                    @click="${()=>this.onAttributeActionClick(i,r,t)}">
                <or-icon icon="${t.icon}"></or-icon>
            </button>
        `}};__decorate([s({type:Array})],AttributesPanel.prototype,"attributeRefs",void 0),__decorate([s({type:Boolean})],AttributesPanel.prototype,"multi",void 0),__decorate([s({type:Boolean})],AttributesPanel.prototype,"onlyDataAttrs",void 0),__decorate([s()],AttributesPanel.prototype,"attributeFilter",void 0),__decorate([s()],AttributesPanel.prototype,"attributeIconCallback",void 0),__decorate([s()],AttributesPanel.prototype,"attributeLabelCallback",void 0),__decorate([s()],AttributesPanel.prototype,"attributeActionCallback",void 0),__decorate([a()],AttributesPanel.prototype,"loadedAssets",void 0),AttributesPanel=__decorate([o("attributes-panel")],AttributesPanel);export{AttributesPanel};