var __decorate=this&&this.__decorate||function(e,t,s,a){var l,i=arguments.length,o=i<3?t:null===a?a=Object.getOwnPropertyDescriptor(t,s):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(e,t,s,a);else for(var r=e.length-1;r>=0;r--)(l=e[r])&&(o=(i<3?l(o):i>3?l(t,s,o):l(t,s))||o);return i>3&&o&&Object.defineProperty(t,s,o),o};import{css as e,html as t,LitElement as s}from"lit";import{customElement as a,property as l,state as i}from"lit/decorators.js";import{AssetModelUtil as o}from"@openremote/model";import{i18next as r}from"@openremote/or-translate";import{InputType as n}from"@openremote/or-mwc-components/or-mwc-input";import{Util as c}from"@openremote/core";import{when as p}from"lit/directives/when.js";import{createRef as d,ref as u}from"lit/directives/ref.js";import{OrMwcDialog as y,showDialog as m}from"@openremote/or-mwc-components/or-mwc-dialog";import{comboBoxRenderer as v}from"@openremote/or-vaadin-components/or-vaadin-combo-box";import{styleMap as h}from"lit/directives/style-map.js";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=o.getAssetDescriptors().filter(e=>"asset"===e.descriptorType)}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,a,l;let i=this.mapDescriptors(this._loadedAssetTypes),o=this.assetType?i.find(e=>e.value===this.assetType):void 0;return t`
            <div style="display: flex; flex-direction: column; gap: 8px;">

                <!-- Select asset type -->
                <or-vaadin-combo-box .items=${i} .selectedItem=${o} required item-value-path="value" item-label-path="text"
                                     ${v(e=>t`
            <div style="display: flex; align-items: center; gap: 6px;">
                <or-icon icon=${e.icon} style=${e.styleMap?h(e.styleMap):void 0}></or-icon>
                <span>${e.text}</span>
            </div>
        `,[])} 
                                     @change=${e=>{this.assetType=e.currentTarget.value}}>
                    <or-icon slot="prefix" icon=${null!=(e=null==o?void 0:o.icon)?e:"selection-ellipse"} style=${(null==o?void 0:o.styleMap)?h(o.styleMap):void 0}></or-icon>
                    <or-translate slot="label" value="filter.assetTypeLabel"></or-translate>
                </or-vaadin-combo-box>

                <!-- Switch to include all assets of this type  -->
                ${p(null==(s=this.config.assets)?void 0:s.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="${n.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 -->
                ${p(null==(a=this.config.assets)?void 0:a.enabled,()=>{var e;let s="string"==typeof this.assetIds?[this.assetIds]:this.assetIds,a=this.allOfType?r.t("allAssets"):((null==(e=this.assetIds)?void 0:e.length)||0)+" "+r.t("assets");return t`
                        <or-vaadin-button ?disabled=${!this.assetType||this.allOfType} @click=${()=>{var e;return this._openAssetSelector(this.assetType,s,null==(e=this.config.assets)?void 0:e.multi)}}>
                            <span>${a}</span>
                        </or-vaadin-button>
                    `})}

                <!-- Select one or more attributes -->
                ${p(null==(l=this.config.attributes)?void 0:l.enabled,()=>{var e,s,a,l,i;let o=null!=(s=null==(e=this._attributeSelectList)?void 0:e.map(e=>({key:e[0],value:e[1]})))?s:[],r=null!=(l=null==(a=this.attributeNames)?void 0:a.map(e=>o.find(t=>t.key===e)))?l:[];return(null==(i=this.config.attributes)?void 0:i.multi)?t`
                            <or-vaadin-multi-select-combo-box .items=${o} .selectedItems=${r} item-value-path="key" item-label-path="value"
                                                              ?disabled=${!this.assetType} @change=${e=>{this.attributeNames=e.currentTarget.selectedItems.map(e=>e.key)}}>
                                <or-translate slot="label" value="filter.attributeLabel"></or-translate>
                            </or-vaadin-multi-select-combo-box>
                        `:t`
                           <or-vaadin-combo-box .items=${o} .selectedItem=${r[0]} item-value-path="key" item-label-path="value"
                                                ?disabled=${!this.assetType} @change=${e=>{this.attributeNames=[e.currentTarget.value]}}>
                               <or-translate slot="label" value="filter.attributeLabel"></or-translate>
                           </or-vaadin-combo-box>
                       `})}
            </div>
        `}mapDescriptors(e,t){let s=e.map(e=>({styleMap:{color:e.colour?"#"+e.colour:"unset"},icon:e.icon,text:c.getAssetTypeLabel(e),value:e.name,data:e})).sort(c.sortByString(e=>e.text));return t&&s.splice(0,0,t),s}getAttributesByType(e){var t;let s=o.getAssetDescriptor(e);if(s){let a=o.getAssetTypeInfo(s);if(null==a?void 0:a.attributeDescriptors){let s=null==(t=this.config.attributes)?void 0:t.valueTypes;return(s?a.attributeDescriptors.filter(e=>s.indexOf(e.type)>-1):a.attributeDescriptors).map(t=>{let s=c.getAttributeLabel(t,void 0,e,!1);return[t.name,s]}).sort(c.sortByString(e=>e[1]))}}}onAssetAllOfTypeToggle(e){this.allOfType=e.detail.value}_openAssetSelector(e,s,a=!1){let l=d();m(new y().setHeading(r.t("linkedAssets")).setStyles(t`<style>
                or-asset-tree {
                    min-height: 400px;
                    max-height: 50vh;
                }
            </style>`).setContent(t`
                <div style="width: 400px;">
                    <or-asset-tree ${u(l)} id="chart-asset-tree" readonly disableSubscribe .config="${{select:{types:[e],multiSelect:a}}}" .selectedIds="${s}"
                                   .showSortBtn="${!1}" .showFilterIcon="${!1}" .checkboxes="${a}"
                    ></or-asset-tree>
                </div>
            `).setActions([{default:!0,actionName:"cancel",content:"cancel"},{actionName:"ok",content:"ok",action:()=>{let e=l.value;(null==e?void 0:e.selectedIds)&&(a?this.assetIds=e.selectedIds:this.assetIds=e.selectedIds[0])}}]).setDismissAction({actionName:"cancel"}))}};__decorate([l()],AssettypesPanel.prototype,"assetType",void 0),__decorate([l()],AssettypesPanel.prototype,"config",void 0),__decorate([l()],AssettypesPanel.prototype,"allOfType",void 0),__decorate([l()],AssettypesPanel.prototype,"assetIds",void 0),__decorate([l()],AssettypesPanel.prototype,"attributeNames",void 0),__decorate([i()],AssettypesPanel.prototype,"_attributeSelectList",void 0),__decorate([i()],AssettypesPanel.prototype,"_loadedAssetTypes",void 0),AssettypesPanel=__decorate([a("assettypes-panel")],AssettypesPanel);export{AssettypesPanel};