var __decorate=this&&this.__decorate||function(e,t,i,r){var s,n=arguments.length,o=n<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,i):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(e,t,i,r);else for(var a=e.length-1;a>=0;a--)(s=e[a])&&(o=(n<3?s(o):n>3?s(t,i,o):s(t,i))||o);return n>3&&o&&Object.defineProperty(t,i,o),o},__awaiter=this&&this.__awaiter||function(e,t,i,r){return new(i||(i=Promise))(function(s,n){function o(e){try{l(r.next(e))}catch(e){n(e)}}function a(e){try{l(r.throw(e))}catch(e){n(e)}}function l(e){var t;e.done?s(e.value):((t=e.value)instanceof i?t:new i(function(e){e(t)})).then(o,a)}l((r=r.apply(e,t||[])).next())})};import{LitElement as e,html as t,css as i}from"lit";import{customElement as r,property as s}from"lit/decorators.js";import{AssetModelUtil as n}from"@openremote/model";import{nodeConverter as o}from"../converters/node-converter";import{InputType as a}from"@openremote/or-mwc-components/or-mwc-input";import l from"@openremote/rest";import"@openremote/or-asset-tree";import{ResizeObserver as c}from"resize-observer";import{project as u}from"./flow-editor";import{NodeUtilities as d}from"../node-structure";import{translate as p,i18next as h}from"@openremote/or-translate";import{PickerStyle as m}from"../styles/picker-styles";import{Util as v}from"@openremote/core";import{OrAssetAttributePicker as f,OrAssetAttributePickerPickedEvent as y}from"@openremote/or-attribute-picker";import{showDialog as b}from"@openremote/or-mwc-components/or-mwc-dialog";import{getAssetDescriptorIconTemplate as g}from"@openremote/or-icon";import{ifDefined as w}from"lit/directives/if-defined.js";let InternalPicker=class extends p(h)(e){constructor(){super()}get internal(){return this.node.internals[this.internalIndex]}static get styles(){return[i`
            :host{
                padding: 0;
                margin: 0;
                display: flex;
                flex-direction: column;
                --or-app-color4: var(--or-mwc-input-color);
            }`,m,i`.attribute-label-white {
                background: #ffffff;
            }
            .selected-asset-container {
                display: flex;
                align-items: center;
            }
            .selected-asset-container:hover {
                cursor: pointer;
                background-color: #F9F9F9;
            }
            .selected-asset-label {
                padding: 5px;
                display: flex;
                flex-direction: column;
                line-height: 16px;
                justify-content: flex-start;
                font-size: 14px;
                text-align: left;
            }
            .selected-asset-label .asset {
                color: rgb(76, 76, 76);
            }
            .selected-asset-label .asset-attribute {
                color: grey;
            }
            .selected-asset-icon {
                display: flex;
                justify-content: center;
                padding: 0px 5px 0px 5px;
                --or-icon-width: 20px;
            }`]}firstUpdated(){this.addEventListener("contextmenu",e=>e.stopPropagation()),this.addEventListener("mousedown",e=>(u.createUndoSnapshot(),u.notifyChange())),this.resizeObserver=new c((e,t)=>{let i=e[0].contentRect;this.node.size={x:i.width-20,y:i.height-20}}),this.resizeObserver.observe(this)}render(){switch(this.internal.picker.type){case"ASSET_ATTRIBUTE":return this.internal.value&&!this.selectedAsset&&this.setSelectedAssetFromInternalValue(),this.assetAttributeInput;case"COLOR":return this.colorInput;case"DOUBLE_DROPDOWN":return this.doubleDropdownInput;case"CHECKBOX":return this.checkBoxInput;case"DROPDOWN":return this.dropdownInput;case"MULTILINE":return this.multilineInput;case"DATE":return this.getNumberInput(0,void 0,50);case"NUMBER":return this.getNumberInput(void 0,void 0,void 0);case"TEXT":return this.textInput;default:return t`unimplemented picker`}}setSocketTypeDynamically(e){return __awaiter(this,void 0,void 0,function*(){let t=(yield l.api.AssetResource.queryAssets({ids:[e.assetId],select:{attributes:[e.attributeName]}})).data,i=this.node.outputs[0]||this.node.inputs[0];if((i.type="ANY",null!=t&&null!=t[0])&&null!=t[0].attributes)try{let r=t[0].attributes[e.attributeName],s=n.getValueDescriptors().find(e=>e.name===r.type);i.type=d.convertValueTypeToSocketType(s)}catch(e){console.error(e)}})}setSelectedAssetFromInternalValue(){return __awaiter(this,void 0,void 0,function*(){let e=yield l.api.AssetResource.queryAssets({ids:[this.internal.value.assetId]});0===e.data.length?console.warn(`Asset with id ${this.internal.value.assetId} is missing`):this.selectedAsset=e.data[0]})}get assetAttributeInput(){var e,i,r,s;let o=()=>{b(new f().setShowOnlyRuleStateAttrs(!0).setShowOnlyDatapointAttrs(!1).setMultiSelect(!1)).addEventListener(y.NAME,e=>__awaiter(this,void 0,void 0,function*(){let t={assetId:e.detail[0].id,attributeName:e.detail[0].name};yield this.setSocketTypeDynamically(t),this.setValue(t),yield this.setSelectedAssetFromInternalValue()}))},l="?";if(this.selectedAsset&&this.selectedAsset.attributes&&(null==(i=null==(e=this.internal)?void 0:e.value)?void 0:i.attributeName)){let e=null==(s=null==(r=this.internal)?void 0:r.value)?void 0:s.attributeName,t=n.getAttributeDescriptor(e,this.selectedAsset.type),i=this.selectedAsset.attributes[e];i&&(l=v.getAttributeLabel(i,t,this.selectedAsset.type,!0))}let c=g(this.selectedAsset?n.getAssetDescriptor(this.selectedAsset.type):void 0);return t`<div>
            ${this.selectedAsset?t`<div class="attribute-label attribute-label-white selected-asset-container" @click="${()=>o()}">
                        <div class="selected-asset-icon">${c}</div>
                        <div class="selected-asset-label">
                            <div class="asset">${this.selectedAsset.name}</div>
                            <div class="asset-attribute">${l}</div>
                        </div>
                    </div>`:t`<or-mwc-input class="attribute-label-white" .type="${a.BUTTON}" label="attribute" icon="plus" @or-mwc-input-changed="${()=>o()}"></or-mwc-input>`}
        </div>`}get colorInput(){return t`<or-mwc-input type="color"></or-mwc-input>`}get doubleDropdownInput(){return t`unimplemented`}get dropdownInput(){return t`<writable-dropdown @input="${e=>this.setValue(e.target.value)}" .value="${this.internal.value}" .options="${this.internal.picker.options}">
        </writable-dropdown>`}get checkBoxInput(){return t`<input type="checkbox" ?checked="${this.internal.value||!1}" @input="${e=>this.setValue(e.target.checked)}"/>`}get multilineInput(){let e=this.node.size?`width:${this.node.size.x}px; height:${this.node.size.y}px`:"";return t`<textarea @wheel="${e=>{if(e.target.clientHeight<e.target.scrollHeight)return e.stopPropagation()}}" style="${e}" @input="${e=>this.setValue(e.target.value)}" placeholder="${this.internal.name}">${this.internal.value||""}</textarea>`}getNumberInput(e,i,r){return t`<input
                @wheel="${e=>{if(e.target===this.shadowRoot.activeElement)return e.stopPropagation()}}"
                @input="${e=>this.setValue(parseFloat(e.target.value))}"
                value="${this.internal.value||0}" type="number" placeholder="${this.internal.name}"
                style="max-width: ${w(r)}px"
                min="${w(e)}" max="${w(i)}"
        />`}get textInput(){return t`<input @input="${e=>this.setValue(e.target.value)}" value="${this.internal.value||""}" type="text" placeholder="${this.internal.name}"/>`}setValue(e){this.node.internals[this.internalIndex].value=e,this.onPicked()}onPicked(){return __awaiter(this,void 0,void 0,function*(){yield this.updateComplete,this.dispatchEvent(new CustomEvent("picked"))})}};__decorate([s({converter:o,reflect:!0})],InternalPicker.prototype,"node",void 0),__decorate([s({type:Number,reflect:!0})],InternalPicker.prototype,"internalIndex",void 0),__decorate([s({type:Object})],InternalPicker.prototype,"selectedAsset",void 0),InternalPicker=__decorate([r("internal-picker")],InternalPicker);export{InternalPicker};