var __decorate=this&&this.__decorate||function(t,e,s,i){var r,a=arguments.length,o=a<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,s):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(t,e,s,i);else for(var n=t.length-1;n>=0;n--)(r=t[n])&&(o=(a<3?r(o):a>3?r(e,s,o):r(e,s))||o);return a>3&&o&&Object.defineProperty(e,s,o),o},__awaiter=this&&this.__awaiter||function(t,e,s,i){return new(s||(s=Promise))(function(r,a){function o(t){try{l(i.next(t))}catch(t){a(t)}}function n(t){try{l(i.throw(t))}catch(t){a(t)}}function l(t){var e;t.done?r(t.value):((e=t.value)instanceof s?e:new s(function(t){t(e)})).then(o,n)}l((i=i.apply(t,e||[])).next())})};import{customElement as t,property as e,state as s}from"lit/decorators.js";import{AttributePicker as i,AttributePickerPickedEvent as r}from"./attribute-picker";import a,{DefaultColor5 as o,Util as n}from"@openremote/core";import{html as l,unsafeCSS as d}from"lit";import{InputType as c}from"@openremote/or-mwc-components/or-mwc-input";import{when as u}from"lit/directives/when.js";import{until as h}from"lit/directives/until.js";export class OrAssetAttributePickerPickedEvent extends r{constructor(t){super(OrAssetAttributePickerPickedEvent.NAME,{bubbles:!0,composed:!0,detail:t})}}OrAssetAttributePickerPickedEvent.NAME="or-asset-attribute-picker-picked";let OrAssetAttributePicker=class extends i{constructor(){super(...arguments),this.selectedAssets=[],this.selectedAttributes=[]}setAttributeFilter(t){return this.attributeFilter=t,this}setSelectedAssets(t){return this.selectedAssets=t,this._updateDialogContent(),this}setSelectedAttributes(t){return this.selectedAttributes=t,this.addBtn&&(this.addBtn.disabled=0===this.selectedAttributes.length),this}_setDialogActions(){this.actions=[{actionName:"cancel",content:"cancel"},{actionName:"add",content:l`
                    <or-mwc-input id="add-btn" class="button" label="add" .type="${c.BUTTON}"></or-mwc-input>`,action:()=>{this.addBtn.disabled||this.dispatchEvent(new OrAssetAttributePickerPickedEvent(this.selectedAttributes))}}]}_setDialogContent(){this.content=()=>l`
            <div class="row" style="display: flex;height: 600px;width: 800px;border-top: 1px solid ${d(o)};">
                <div class="col" style="width: 260px;overflow: auto;border-right: 1px solid ${d(o)};">
                    <or-asset-tree id="chart-asset-tree" readonly .selectedIds="${this.selectedAssets.length>0?this.selectedAssets:null}"
                                   @or-asset-tree-selection="${t=>this._onAssetSelectionChanged(t)}">
                    </or-asset-tree>
                </div>
                <div class="col" style="flex: 1 1 auto;width: 260px;overflow: auto;">
                    ${u(this._assetAttributes&&this._assetAttributes.length>0,()=>{let t=this.selectedAttributes.filter(t=>{var e;return t.id===(null==(e=this._asset)?void 0:e.id)}).map(t=>t.name);return l`
                            <div class="attributes-header">
                                <or-translate value="attribute_plural"></or-translate>
                            </div>
                            ${h(this._getAttributesTemplate(this._assetAttributes,void 0,t,this.multiSelect,t=>this._onAttributesSelect(t)),l`<or-loading></or-loading>`)}
                        `},()=>l`
                        <div style="display: flex;align-items: center;text-align: center;height: 100%;padding: 0 20px;">
                            <span style="width:100%">
                                <or-translate value="${this._assetAttributes&&0===this._assetAttributes.length?this.showOnlyDatapointAttrs&&this.showOnlyRuleStateAttrs?"noDatapointsOrRuleStateAttributes":this.showOnlyDatapointAttrs?"noDatapointsAttributes":this.showOnlyRuleStateAttrs?"noRuleStateAttributes":"noAttributesToShow":"selectAssetOnTheLeft"}">
                                </or-translate>
                            </span>
                        </div>
                    `)}
                </div>
        `}_onAssetSelectionChanged(t){return __awaiter(this,void 0,void 0,function*(){this._assetAttributes=void 0,this.multiSelect||(this.selectedAttributes=[]),this.addBtn.disabled=0===this.selectedAttributes.length;let e=t.target;e.disabled=!0;let s=0===t.detail.newNodes.length?void 0:t.detail.newNodes[0].asset;this._asset=s,s&&(s=(yield a.rest.api.AssetResource.get(s.id)).data)&&(this._assetAttributes=Object.values(s.attributes).map(t=>Object.assign(Object.assign({},t),{id:s.id})).sort(n.sortByString(t=>t.name)),this.attributeFilter&&(this._assetAttributes=this._assetAttributes.filter(t=>this.attributeFilter(t))),this.showOnlyDatapointAttrs&&this.showOnlyRuleStateAttrs?this._assetAttributes=this._assetAttributes.filter(t=>t.meta&&(t.meta.storeDataPoints||t.meta.ruleState||t.meta.agentLink)):this.showOnlyDatapointAttrs?this._assetAttributes=this._assetAttributes.filter(t=>t.meta&&(t.meta.storeDataPoints||t.meta.agentLink)):this.showOnlyRuleStateAttrs&&(this._assetAttributes=this._assetAttributes.filter(t=>t.meta&&(t.meta.ruleState||t.meta.agentLink)))),e.disabled=!1})}_onAttributesSelect(t){this.setSelectedAttributes([...this.selectedAttributes.filter(t=>t.id!==this._asset.id),...t.map(t=>{var e;return{id:null==(e=this._asset)?void 0:e.id,name:t}})])}};__decorate([e()],OrAssetAttributePicker.prototype,"attributeFilter",void 0),__decorate([s()],OrAssetAttributePicker.prototype,"_assetAttributes",void 0),OrAssetAttributePicker=__decorate([t("or-asset-attribute-picker")],OrAssetAttributePicker);export{OrAssetAttributePicker};