var __decorate=this&&this.__decorate||function(e,t,o,i){var r,s=arguments.length,a=s<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,o,i);else for(var n=e.length-1;n>=0;n--)(r=e[n])&&(a=(s<3?r(a):s>3?r(t,o,a):r(t,o))||a);return s>3&&a&&Object.defineProperty(t,o,a),a},__awaiter=this&&this.__awaiter||function(e,t,o,i){return new(o||(o=Promise))(function(r,s){function a(e){try{l(i.next(e))}catch(e){s(e)}}function n(e){try{l(i.throw(e))}catch(e){s(e)}}function l(e){var t;e.done?r(e.value):((t=e.value)instanceof o?t:new o(function(e){e(t)})).then(a,n)}l((i=i.apply(e,t||[])).next())})};import{css as e,html as t,LitElement as o,unsafeCSS as i}from"lit";import{customElement as r,property as s,query as a}from"lit/decorators.js";import{AssetModelUtil as n}from"@openremote/model";import{InputType as l}from"@openremote/or-mwc-components/or-mwc-input";import{OrAssetTreeSelectionEvent as d}from"./index";import{createListGroup as p}from"@openremote/or-mwc-components/or-mwc-list";import{i18next as c}from"@openremote/or-translate";import{DefaultColor3 as m,DefaultColor5 as h,Util as g}from"@openremote/core";export class OrAddChangedEvent extends CustomEvent{constructor(e){super(OrAddChangedEvent.NAME,{bubbles:!0,composed:!0,detail:e})}}OrAddChangedEvent.NAME="or-add-asset-changed";let OrAddAssetDialog=class extends o{static get styles(){return e`
            :host{
                border-style: solid;
                border-color: var(--or-app-color5, ${i(h)});
                border-width: 1px 0;
            }
            
            #name-wrapper {
                display: flex;
                flex-direction: column;
                margin-top: 12px;
            }

            #toggle-parent-selector,
            #remove-parent {
                flex: 0 0 50px;
                margin: 4px 0 0 5px;
            }

            #name-input,
            #parent-wrapper {
                margin: 10px 0;
            }

            #parent-wrapper {
                display: flex;
            }

            #parent {
                flex: 1 1 auto;
            }
            
            #parent-selector {
                max-width: 250px;
                border-left: 1px solid var(--or-app-color5, ${i(h)});
            }
            
            #mdc-dialog-form-add {
                display: flex;
                height: 100%;
                max-height: 600px;
                width: 1000px;
            }

            .msg {
                display: flex;
                justify-content: center;
                align-items: center;
                text-align: center;
                height: 100%;
                font-family: "Segoe UI", Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
                font-size: 14px;
            }

            #asset-type-option-container {
                padding: 15px;
                flex: 1 1 auto;
                overflow: auto;
                max-width: 100%;
                font-size: 16px;
            }

            #type-list {
                width: 260px;
                overflow: auto;
                text-transform: capitalize;
                border-right: 1px solid var(--or-app-color5, ${i(h)});
            }

            #type-title {
                display: flex;
                align-items: center;
                margin: 9px 4px;
            }

            #type-description {
                text-transform: capitalize;
                color: var(--or-app-color3, ${i(m)});
                margin-left: 10px;
                font-size: 18px;
                font-weight: bold;
                font-family: "Segoe UI", Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
            }

            .heading,
            .mdc-list-group__subheader {
                text-transform: uppercase;
                font-family: "Segoe UI", Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
                font-weight: bolder;
                line-height: 1em;
                color: var(--or-app-color3, ${i(m)});
                letter-spacing: 0.025em;
                font-size: 14px;
                margin: 20px 0 10px;
            }

            .mdc-list-group__subheader {
                margin: 20px 0 0 16px;
            }
        `}constructor(){super(),this.selectedAttributes=[],this.showParentAssetSelector=!1,this.selectedChildAssetType="",this.name="New Asset",this.addEventListener(d.NAME,e=>{this.parent=e.detail.newNodes[0].asset})}render(){let e=e=>e.map(e=>({styleMap:{"--or-icon-fill":e.colour?"#"+e.colour:"unset"},icon:e.icon,text:g.getAssetTypeLabel(e),value:e.name,data:e})).sort(g.sortByString(e=>e.text)),o=e(this.agentTypes),i=e(this.assetTypes),r=[];o.length>0&&r.push({heading:c.t("agents"),list:t`<or-mwc-list @or-mwc-list-changed="${e=>{1===e.detail.length&&this.onTypeChanged(!0,e.detail[0])}}" .listItems="${o}" id="agent-list"></or-mwc-list>`}),i.length>0&&r.push({heading:c.t("assets"),list:t`<or-mwc-list @or-mwc-list-changed="${e=>{1===e.detail.length&&this.onTypeChanged(!1,e.detail[0])}}" .listItems="${i}" id="asset-list"></or-mwc-list>`});let s=this.parent?this.parent.name+" ("+this.parent.id+")":c.t("none");return t`
            <div class="col" style="height: 100%;">
                <form id="mdc-dialog-form-add" class="row">
                    <div id="type-list" class="col">
                        ${p(r)}
                    </div>
                    <div id="asset-type-option-container" class="col">
                        ${!this.selectedType?t`<div class="msg"><or-translate value="noAssetTypeSelected"></or-translate></div>`:this.getTypeTemplate(this.selectedType,s)}
                    </div>
                    ${!this.showParentAssetSelector?t``:t`<or-asset-tree id="parent-selector" class="col" .showDeselectBtn="${!1}" .showSortBtn="${!1}" selectedNodes readonly></or-asset-tree>`}
                </form>
            </div>
        `}getTypeTemplate(e,o){var i,r;if(!e.name)return!1;let s=n.getAssetTypeInfo(e.name),a=null==(i=null==s?void 0:s.attributeDescriptors)?void 0:i.filter(e=>!e.optional),d=null==(r=null==s?void 0:s.attributeDescriptors)?void 0:r.filter(e=>!!e.optional);return t`
            <div id="type-title">
                <or-icon style="--or-icon-fill: ${e.colour?"#"+e.colour:"unset"}" id="type-icon" .icon="${e.icon}"></or-icon>
                <or-translate id="type-description" .value="${g.getAssetTypeLabel(e)}"></or-translate>
            </div>
            <div id="name-wrapper">
                <or-mwc-input id="name-input" .type="${l.TEXT}" min="1" max="1023" required .label="${c.t("name")}" .value="${this.name}" @or-mwc-input-changed="${e=>this.onNameChanged(e.detail.value)}"></or-mwc-input>
                <div id="parent-wrapper">
                    <or-mwc-input id="parent" .type="${l.TEXT}" readonly .label="${c.t("parent")}" .value="${o}" @click="${()=>this._onToggleParentAssetSelector()}"></or-mwc-input>
                    <or-mwc-input id="remove-parent" ?disabled="${!this.parent}" type="${l.BUTTON}" icon="close" @or-mwc-input-changed="${()=>this._onDeselectClicked()}"></or-mwc-input>
                    <or-mwc-input id="toggle-parent-selector" icon="${this.showParentAssetSelector?"pencil-off":"pencil"}" type="${l.BUTTON}" @or-mwc-input-changed="${()=>this._onToggleParentAssetSelector()}"></or-mwc-input>
                </div>
            </div>
            
            ${!a?t``:t`
                    <div>
                        <div class="heading">${c.t("attribute_plural")}</div>
                        <div style="display: grid">
                            ${a.sort(g.sortByString(e=>e.name)).map(e=>t`
                                    <or-mwc-input .type="${l.CHECKBOX}" .label="${g.getAttributeLabel(void 0,e,void 0,!0)}"
                                                  .disabled="${!0}" .value="${!0}"></or-mwc-input>
                            `)}
                        </div>
                    `}

            ${!d?t``:t`
                    <div>
                        <div class="heading">${c.t("optional_attributes")}</div>
                        <div style="display: grid">
                            ${d.sort(g.sortByString(e=>e.name)).map(e=>t`
                                    <or-mwc-input .type="${l.CHECKBOX}" .label="${g.getAttributeLabel(void 0,e,void 0,!0)}"
                                                  .value="${this.selectedAttributes.find(t=>t===e)}"
                                                  @or-mwc-input-changed="${t=>t.detail.value?this.selectedAttributes.push(e):this.selectedAttributes.splice(this.selectedAttributes.findIndex(t=>t===e),1)}"></or-mwc-input>
                            `)}
                        </div>
                    </div>
                `} 
        `}onNameChanged(e){this.name=e,this.onModified()}onTypeChanged(e,t){return __awaiter(this,void 0,void 0,function*(){yield this.updateComplete,this.selectedAttributes=[],this.selectedType=t.data;let o=e?this.assetList:this.agentList;o&&(o.values=void 0),this.onModified()})}onModified(){this.dispatchEvent(new OrAddChangedEvent({name:this.name,descriptor:this.selectedType}))}_onToggleParentAssetSelector(){this.showParentAssetSelector=!this.showParentAssetSelector}_onDeselectClicked(){this.parent=void 0}};__decorate([s({attribute:!1})],OrAddAssetDialog.prototype,"config",void 0),__decorate([s({attribute:!1})],OrAddAssetDialog.prototype,"agentTypes",void 0),__decorate([s({attribute:!1})],OrAddAssetDialog.prototype,"assetTypes",void 0),__decorate([s({attribute:!1})],OrAddAssetDialog.prototype,"parent",void 0),__decorate([s({attribute:!1})],OrAddAssetDialog.prototype,"selectedType",void 0),__decorate([s({attribute:!1})],OrAddAssetDialog.prototype,"selectedAttributes",void 0),__decorate([s({attribute:!1})],OrAddAssetDialog.prototype,"showParentAssetSelector",void 0),__decorate([s({attribute:!1})],OrAddAssetDialog.prototype,"selectedChildAssetType",void 0),__decorate([a("#name-input")],OrAddAssetDialog.prototype,"nameInput",void 0),__decorate([a("#agent-list")],OrAddAssetDialog.prototype,"agentList",void 0),__decorate([a("#asset-list")],OrAddAssetDialog.prototype,"assetList",void 0),__decorate([a("#parent-asset-list")],OrAddAssetDialog.prototype,"parentAssetList",void 0),OrAddAssetDialog=__decorate([r("or-add-asset-dialog")],OrAddAssetDialog);export{OrAddAssetDialog};