var __decorate=this&&this.__decorate||function(e,t,s,i){var o,r=arguments.length,l=r<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,s):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,s,i);else for(var a=e.length-1;a>=0;a--)(o=e[a])&&(l=(r<3?o(l):r>3?o(t,s,l):o(t,s))||l);return r>3&&l&&Object.defineProperty(t,s,l),l},__awaiter=this&&this.__awaiter||function(e,t,s,i){return new(s||(s=Promise))(function(o,r){function l(e){try{n(i.next(e))}catch(e){r(e)}}function a(e){try{n(i.throw(e))}catch(e){r(e)}}function n(e){var t;e.done?o(e.value):((t=e.value)instanceof s?t:new s(function(e){e(t)})).then(l,a)}n((i=i.apply(e,t||[])).next())})};import{css as e,html as t,LitElement as s}from"lit";import{customElement as i,property as o,state as r}from"lit/decorators.js";import{AssetModelUtil as l}from"@openremote/model";import{getContentWithMenuTemplate as a}from"@openremote/or-mwc-components/or-mwc-menu";import{i18next as n}from"@openremote/or-translate";import{InputType as c}from"@openremote/or-mwc-components/or-mwc-input";import p,{Util as d}from"@openremote/core";import{when as u}from"lit/directives/when.js";import{createRef as y,ref as h}from"lit/directives/ref.js";import{OrMwcDialog as m,showDialog as v}from"@openremote/or-mwc-components/or-mwc-dialog";export class AssetTypeSelectEvent extends CustomEvent{constructor(e){super(AssetTypeSelectEvent.NAME,{bubbles:!0,composed:!0,detail:e})}}AssetTypeSelectEvent.NAME="assettype-select";export class AssetAllOfTypeSwitchEvent extends CustomEvent{constructor(e){super(AssetAllOfTypeSwitchEvent.NAME,{bubbles:!0,composed:!0,detail:e})}}AssetAllOfTypeSwitchEvent.NAME="alloftype-switch";export class AssetIdsSelectEvent extends CustomEvent{constructor(e){super(AssetIdsSelectEvent.NAME,{bubbles:!0,composed:!0,detail:e})}}AssetIdsSelectEvent.NAME="assetids-select";export class AttributeNamesSelectEvent extends CustomEvent{constructor(e){super(AttributeNamesSelectEvent.NAME,{bubbles:!0,composed:!0,detail:e})}}AttributeNamesSelectEvent.NAME="attributenames-select";let styling=e`
  .switchMwcInputContainer {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
`,AssettypesPanel=class extends s{constructor(){super(...arguments),this.config={attributes:{enabled:!0}},this.allOfType=!1,this._attributeSelectList=[],this._loadedAssetTypes=l.getAssetDescriptors().filter(e=>"asset"===e.descriptorType),this.assetTreeDataProvider=()=>__awaiter(this,void 0,void 0,function*(){let e={realm:{name:p.displayRealm},select:{attributes:[]}},t=(yield p.rest.api.AssetResource.queryAssets(e)).data,s=[...new Set([].concat(...t.filter(e=>e.type===this.assetType).map(e=>e.path)))];return t.filter(e=>s.includes(e.id))})}static get styles(){return[styling]}willUpdate(e){super.willUpdate(e),e.has("assetType")&&this.assetType&&(this._attributeSelectList=this.getAttributesByType(this.assetType),this.dispatchEvent(new AssetTypeSelectEvent(this.assetType))),e.has("allOfType")&&this.dispatchEvent(new AssetAllOfTypeSwitchEvent(this.allOfType)),e.has("assetIds")&&this.assetIds&&this.dispatchEvent(new AssetIdsSelectEvent(this.assetIds)),e.has("attributeNames")&&this.attributeNames&&this.dispatchEvent(new AttributeNamesSelectEvent(this.attributeNames))}render(){var e,s,i;return t`
            <div style="display: flex; flex-direction: column; gap: 8px;">

                <!-- Select asset type -->
                <div>
                    ${this._loadedAssetTypes.length>0?a(this.getAssetTypeTemplate(),this.mapDescriptors(this._loadedAssetTypes,{text:n.t("filter.assetTypeMenuNone"),value:"",icon:"selection-ellipse"}),void 0,e=>{this.assetType=e},void 0,!1,!0,!0,!0):t``}
                </div>

                <!-- Switch to include all assets of this type  -->
                ${u(null==(e=this.config.assets)?void 0:e.allOfTypeOption,()=>t`
                        <div style="display: flex; justify-content: space-between; align-items: center;">
                            <span><or-translate value="allAssetsofType"></or-translate></span>
                            <or-mwc-input .type="${c.SWITCH}" style="width: 70px;"
                                          .value="${this.allOfType}"
                                          .disabled="${!this.assetType}"
                                          @or-mwc-input-changed="${e=>this.onAssetAllOfTypeToggle(e)}"
                            ></or-mwc-input>
                        </div>
                    `)}

                <!-- Select one or more assets -->
                ${u(null==(s=this.config.assets)?void 0:s.enabled,()=>{var e;let s="string"==typeof this.assetIds?[this.assetIds]:this.assetIds;return t`
                        <div>
                            <or-mwc-input .type="${c.BUTTON}" .label="${((null==(e=this.assetIds)?void 0:e.length)||0)+" "+n.t("assets")}" .disabled="${!this.assetType||this.allOfType}" fullWidth outlined comfortable style="width: 100%;"
                                          @or-mwc-input-changed="${e=>{var t;return this._openAssetSelector(this.assetType,s,null==(t=this.config.assets)?void 0:t.multi)}}"
                            ></or-mwc-input>
                        </div>
                    `})}

                <!-- Select one or more attributes -->
                ${u(null==(i=this.config.attributes)?void 0:i.enabled,()=>{var e;let s=this._attributeSelectList.map(e=>[e[0],e[1]]),i=e=>__awaiter(this,void 0,void 0,function*(){return e?s.filter(t=>t[1].toLowerCase().includes(e.toLowerCase())):s});return t`
                        <div>
                            <or-mwc-input .type="${c.SELECT}" label="${n.t("filter.attributeLabel")}" .disabled="${!this.assetType}" style="width: 100%;"
                                          .options="${s}" .searchProvider="${i}" .multiple="${null==(e=this.config.attributes)?void 0:e.multi}" .value="${this.attributeNames}"
                                          @or-mwc-input-changed="${e=>{this.attributeNames=e.detail.value}}"
                            ></or-mwc-input>
                        </div>
                    `})}
            </div>
        `}getAssetTypeTemplate(){if(!this.assetType)return this.getSelectHeader();{let e=this._loadedAssetTypes.find(e=>e.name===this.assetType);return e?this.getSelectedHeader(e):this.getSelectHeader()}}getSelectHeader(){return t`
            <or-mwc-input style="width:100%;" type="${c.TEXT}" readonly .label="${n.t("filter.assetTypeLabel")}"
                          iconTrailing="menu-down" iconColor="rgba(0, 0, 0, 0.87)" icon="selection-ellipse"
                          value="${n.t("filter.assetTypeNone")}">
            </or-mwc-input>
        `}getSelectedHeader(e){return t`
            <or-mwc-input style="width:100%;" type="${c.TEXT}" readonly .label="${n.t("filter.assetTypeLabel")}"
                          .iconColor="${e.colour}" iconTrailing="menu-down" icon="${e.icon}"
                          value="${d.getAssetTypeLabel(e)}">
            </or-mwc-input>
        `}mapDescriptors(e,t){let s=e.map(e=>({styleMap:{"--or-icon-fill":e.colour?"#"+e.colour:"unset"},icon:e.icon,text:d.getAssetTypeLabel(e),value:e.name,data:e})).sort(d.sortByString(e=>e.text));return t&&s.splice(0,0,t),s}getAttributesByType(e){var t;let s=l.getAssetDescriptor(e);if(s){let i=l.getAssetTypeInfo(s);if(null==i?void 0:i.attributeDescriptors){let s=null==(t=this.config.attributes)?void 0:t.valueTypes;return(s?i.attributeDescriptors.filter(e=>s.indexOf(e.type)>-1):i.attributeDescriptors).map(t=>{let s=d.getAttributeLabel(t,void 0,e,!1);return[t.name,s]}).sort(d.sortByString(e=>e[1]))}}}onAssetAllOfTypeToggle(e){this.allOfType=e.detail.value}_openAssetSelector(e,s,i=!1){let o=y();v(new m().setHeading(n.t("linkedAssets")).setContent(t`
                <div style="width: 400px;">
                    <or-asset-tree ${h(o)} .dataProvider="${this.assetTreeDataProvider}" expandAllNodes
                                   id="chart-asset-tree" readonly .config="${{select:{types:[e],multiSelect:i}}}" .selectedIds="${s}"
                                   .showSortBtn="${!1}" .showFilter="${!1}" .checkboxes="${i}"
                    ></or-asset-tree>
                </div>
            `).setActions([{default:!0,actionName:"cancel",content:"cancel"},{actionName:"ok",content:"ok",action:()=>{let e=o.value;(null==e?void 0:e.selectedIds)&&(i?this.assetIds=e.selectedIds:this.assetIds=e.selectedIds[0])}}]).setDismissAction({actionName:"cancel"}))}};__decorate([o()],AssettypesPanel.prototype,"assetType",void 0),__decorate([o()],AssettypesPanel.prototype,"config",void 0),__decorate([o()],AssettypesPanel.prototype,"allOfType",void 0),__decorate([o()],AssettypesPanel.prototype,"assetIds",void 0),__decorate([o()],AssettypesPanel.prototype,"attributeNames",void 0),__decorate([r()],AssettypesPanel.prototype,"_attributeSelectList",void 0),__decorate([r()],AssettypesPanel.prototype,"_loadedAssetTypes",void 0),AssettypesPanel=__decorate([i("assettypes-panel")],AssettypesPanel);export{AssettypesPanel};