var __decorate=this&&this.__decorate||function(e,t,i,a){var r,o=arguments.length,s=o<3?t:null===a?a=Object.getOwnPropertyDescriptor(t,i):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,a);else for(var l=e.length-1;l>=0;l--)(r=e[l])&&(s=(o<3?r(s):o>3?r(t,i,s):r(t,i))||s);return o>3&&s&&Object.defineProperty(t,i,s),s};import{computeLabel as e,createDefaultValue as t,getSchema as i,isControl as a,mapStateToControlProps as r,Paths as o}from"@jsonforms/core";import{css as s,html as l}from"lit";import{customElement as n,property as d}from"lit/decorators.js";import{LayoutBaseElement as c}from"./layout-base-element";import{controlWithoutLabel as p,getLabel as m,getSchemaPicker as h,getTemplateFromProps as u,showJsonEditor as y}from"../util";import{InputType as v}from"@openremote/or-mwc-components/or-mwc-input";import{i18next as b}from"@openremote/or-translate";import{OrMwcDialog as f,showDialog as g}from"@openremote/or-mwc-components/or-mwc-dialog";import"@openremote/or-mwc-components/or-mwc-list";import"@openremote/or-components/or-collapsible-panel";import{addItemOrParameterDialogStyle as w,baseStyle as $,panelStyle as j}from"../styles";let style=s`
    
    #dynamic-wrapper {
        display: table;
    }
    
    #dynamic-wrapper .row {
        display: table-row;
    }
    
    #dynamic-wrapper .row:hover .button-clear {
        visibility: visible;
    }
    
    #dynamic-wrapper .row > div {
        display: table-cell;
    }
    
    .value-container {
        padding: 0 0 20px 10px;
    }

    .key-container {
        padding: 0 10px 20px 0;
    }

    .value-container, .key-container {
        vertical-align: top;
    }

    .key-container or-mwc-input, .value-container or-mwc-input {
        display: block;
    }

    .value-container > .item-container {
        margin: 0;
    }

    .value-container > .item-container > .delete-container {
        display: none;
    }

    .value-container > .item-container :first-child {
        border: 0;
        padding: 0;
        margin: 0;
        flex: 1;
    }
`;function isDynamic(e){return void 0===e.allOf&&void 0===e.anyOf&&(void 0===e.properties||0===Object.keys(e.properties).length)}let LayoutVerticalElement=class extends c{static get styles(){return[$,j,style]}render(){let t,o,s=[],n={jsonforms:Object.assign({},this.state)},d=i(n),c=isDynamic(this.schema),p=".+";if(c)if("object"==typeof this.schema.patternProperties){let e=Object.entries(this.schema.patternProperties);1===e.length&&(p=e[0][0],t=e[0][1])}else"object"==typeof this.schema.additionalProperties&&(t=this.schema.additionalProperties);let h=this.minimal?"":l`
            <div slot="header">
                <span>${this.label?e(this.label,this.required,!1):""}</span>
                ${this.type?l`<span id="type-label">${this.type}</span>`:""}
            </div>
            <div id="header-description" slot="header-description">
                <div id="errors">
                    ${!this.errors?"":l`<or-icon icon="alert"></or-icon><span>${this.errors}</span>`}
                </div>
                <div id="header-buttons"><or-mwc-input .type="${v.BUTTON}" outlined label="json" icon="pencil" @or-mwc-input-changed="${e=>this._showJson(e)}"></or-mwc-input></div>
            </div>
        `;c&&t?o=this._getDynamicContentTemplate(p,t):this.getChildProps().length>0&&(o=this.getChildProps().map(e=>{if(a(e.uischema)){let t=r(n,e);if(t.label=t.label||m(this.schema,d,void 0,e.uischema.scope)||"",e.label=t.label,e.required=!!t.required,!t.required&&void 0===t.data)return s.push(t),l``}return u(this.state,e)}).filter(e=>void 0!==e));let y=!!o&&(!Array.isArray(o)||o.length>0)||!this.errors&&s.length>0,b=l`
            ${h}
            <div id="content-wrapper" slot="content">
                <div id="content">
                    ${o||""}
                </div>

                ${this.errors||0===s.length&&!c?"":l`
                        <div id="footer">
                            <or-mwc-input .type="${v.BUTTON}" label="addParameter" icon="plus" @or-mwc-input-changed="${()=>this._addParameter(d,s,p,t)}"></or-mwc-input>
                        </div>`}
            </div>
        `;return this.minimal?l`<div>${b}</div>`:l`<or-collapsible-panel .expandable="${y}">${b}</or-collapsible-panel>`}_getDynamicContentTemplate(e,t){if(!this.data)return;let i=e=>{let t=Object.assign({},this.data);delete t[e],this.handleChange(this.path,t)},a=(e,t,i)=>{if(!e.valid)return;if(void 0!==this.data[i])return void e.setCustomValidity(b.t("validation.keyAlreadyExists"));e.setCustomValidity(void 0);let a=Object.assign({},this.data),r=a[t];delete a[t],a[i]=r,this.handleChange(this.path,a)},r={renderers:this.renderers,uischema:p("#"),enabled:this.enabled,visible:this.visible,path:"",schema:t,minimal:!0,required:!1,label:""},s=(e,t)=>(r.path=o.compose(this.path,e),u(this.state,r)||l``);return l`
            <div id="dynamic-wrapper">
                ${Object.entries(this.data).map(([t,r])=>l`
                        <div class="row">
                            <div class="key-container">
                                <or-mwc-input .type="${v.TEXT}" @or-mwc-input-changed="${e=>a(e.currentTarget,t,e.detail.value)}" required .pattern="${e}" .value="${t}"></or-mwc-input>
                            </div>
                            <div class="value-container">
                                ${s(t,r)}
                            </div>
                            <div class="delete-container">
                                <button class="button-clear" @click="${()=>i(t)}"><or-icon icon="close-circle"></or-icon></input>
                            </div>
                        </div>
                    `)}
            </div>
        `}_showJson(e){e.stopPropagation(),y(this.title||this.schema.title||"",this.data,e=>{this.handleChange(this.path||"",e)})}_addParameter(i,a,r,o){let s,n,d,c=0===a.length,p=a.map(t=>{let i=e(t.label,!!t.required,!1);return{text:i,value:i,data:t}}),m=e=>{let t=e.currentTarget;t.setCustomValidity(void 0),d=t.currentValue;let i=t.valid;void 0!==this.data[d]&&(i=!1,t.setCustomValidity(b.t("validation.keyAlreadyExists"))),u.shadowRoot.getElementById("add-btn").disabled=!i},u=g(new f().setContent(()=>{let e;return s&&s.schema&&s.schema.oneOf&&(e=h(i,s.schema,s.path,"oneOf",s.label,e=>{n=e,u.shadowRoot.getElementById("add-btn").disabled=!n,u.shadowRoot.getElementById("schema-description").innerHTML=(n?n.description:b.t("schema.selectTypeMessage"))||b.t("schema.noDescriptionAvailable")})),l`
                <div class="col">
                    <form id="mdc-dialog-form-add" class="row">
                        ${c?"":l`
                            <div id="type-list" class="col">
                                <or-mwc-list @or-mwc-list-changed="${e=>{let t;1===e.detail.length&&(t=!!((s=e.detail[0].data)&&s.schema&&s.schema.oneOf),u.shadowRoot.getElementById("add-btn").disabled=t,u.requestUpdate())}}" .listItems="${p}" id="parameter-list"></or-mwc-list>
                            </div>
                        `}
                        <div id="parameter-desc" class="col">
                            ${!s?"":l`
                                <or-translate id="parameter-title" value="${s.label}"></or-translate>
                                <p>${s.description}</p>`}
                            ${!c?!e?"":l`
                                <style>
                                    #schema-picker {
                                        align-self: stretch;
                                        margin: 10px;
                                        display: flex;
                                        align-items: center;
                                    }
                                    #schema-picker > or-translate {
                                        padding-right: 20px;
                                    }
                                    #schema-picker > or-mwc-input {
                                        flex: 1;
                                    }
                                </style>
                                <div id="schema-picker">
                                    <or-translate style="justify-self: left;" value="type"></or-translate>
                                    ${e}
                                </div>
                                <p id="schema-description">${b.t("schema.selectTypeMessage")}</p>`:l`
                                <style>
                                    #dynamic-wrapper > or-mwc-input {
                                        display: block;
                                        margin: 10px;
                                    }
                                </style>
                                <div id="dynamic-wrapper">
                                    <or-mwc-input required .type="${v.TEXT}" .pattern="${r}" .label="${b.t("schema.keyInputLabel")}" @keyup="${e=>m(e)}"></or-mwc-input>
                                </div>
                            `}
                        </div>
                    </form>
                </div>
            `}).setStyles(w).setHeading((this.label?e(this.label,this.required,!1)+" - ":"")+b.t("addParameter")).setActions([{actionName:"cancel",content:"cancel"},{default:!0,actionName:"add",action:()=>{let e=c?d:s.path.split(".").pop(),a=Object.assign({},this.data),r=c?o:s.schema;a[e]=Array.isArray(r.type)?null:(n?n.defaultValueCreator():void 0)||t(r,i),this.handleChange(this.path||"",a)},content:l`<or-mwc-input id="add-btn" .type="${v.BUTTON}" disabled label="add"></or-mwc-input>`}]).setDismissAction(null))}};__decorate([d()],LayoutVerticalElement.prototype,"minimal",void 0),__decorate([d()],LayoutVerticalElement.prototype,"type",void 0),LayoutVerticalElement=__decorate([n("or-json-forms-vertical-layout")],LayoutVerticalElement);export{LayoutVerticalElement};