var __decorate=this&&this.__decorate||function(e,t,i,a){var r,o=arguments.length,n=o<3?t:null===a?a=Object.getOwnPropertyDescriptor(t,i):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,i,a);else for(var s=e.length-1;s>=0;s--)(r=e[s])&&(n=(o<3?r(n):o>3?r(t,i,n):r(t,i))||n);return o>3&&n&&Object.defineProperty(t,i,n),n};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 n,html as s}from"lit";import{customElement as l,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 v,showJsonEditor as u}from"../util";import{InputType as y}from"@openremote/or-mwc-components/or-mwc-input";import"@openremote/or-vaadin-components/or-vaadin-text-field";import"@openremote/or-vaadin-components/or-vaadin-button";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 x}from"../styles";let style=n`
    
    #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;
    }

    #content-wrapper {
        overflow: auto;
    }

    [slot="header"] {
        display: flex;
        min-width: 0; /* Allows slotted element to shrink */
        & span {
            align-content: center;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-break: break-all;
        }
    }
`;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[$,x,style]}render(){let t,o,n=[],l={jsonforms:Object.assign({},this.state)},d=i(l),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?"":s`
            <div slot="header">
                <span>${this.label?e(this.label,this.required,!1):""}</span>
                ${this.type?s`<span id="type-label" title="${this.type}">${this.type}</span>`:""}
            </div>
            <div id="header-description" slot="header-description">
                <div id="errors">
                    ${!this.errors?"":s`<or-icon icon="alert"></or-icon><span>${this.errors}</span>`}
                </div>
                <div id="header-buttons">
                    <or-vaadin-button @click=${e=>this._showJson(e)}>
                        <or-icon slot="prefix" icon="pencil"></or-icon>
                        <or-translate value="JSON"></or-translate>
                    </or-vaadin-button>
                </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(l,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 n.push(t),s``}return v(this.state,e)}).filter(e=>void 0!==e));let u=!!o&&(!Array.isArray(o)||o.length>0)||!this.errors&&n.length>0,y=s`
            ${h}
            <div id="content-wrapper" slot="content">
                <div id="content">
                    ${o||""}
                </div>

                ${this.errors||0===n.length&&!c?"":s`
                    <div id="footer">
                        <or-vaadin-button @click=${()=>this._addParameter(d,n,p,t)}>
                            <or-icon slot="prefix" icon="plus"></or-icon>
                            <or-translate value="addParameter"></or-translate>
                        </or-vaadin-button>
                    </div>
                `}
            </div>
        `;return this.minimal?s`<div>${y}</div>`:s`<or-collapsible-panel .expandable="${u}">${y}</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.checkValidity())return;if(void 0!==this.data[i]){e.errorMessage=b.t("validation.keyAlreadyExists");return}e.errorMessage=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:""},n=(e,t)=>(r.path=o.compose(this.path,e),v(this.state,r)||s``);return s`
            <div id="dynamic-wrapper">
                ${Object.entries(this.data).map(([t,r])=>s`
                        <div class="row">
                            <div class="key-container">
                                <or-vaadin-text-field value=${t} required pattern="${e}" 
                                                      @change=${e=>{let i=e.currentTarget;a(i,t,i.value)}}>
                                </or-vaadin-text-field>
                            </div>
                            <div class="value-container">
                                ${n(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(),u(this.title||this.schema.title||"",this.data,e=>{this.handleChange(this.path||"",e)})}_addParameter(i,a,r,o){let n,l,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"))),v.shadowRoot.getElementById("add-btn").disabled=!i},v=g(new f().setContent(()=>{let e;return n&&n.schema&&n.schema.oneOf&&(e=h(i,n.schema.oneOf,n.label,e=>{l=e,v.shadowRoot.getElementById("add-btn").disabled=!l,v.shadowRoot.getElementById("schema-description").innerHTML=(l?l.description:b.t("schema.selectTypeMessage"))||b.t("schema.noDescriptionAvailable")})),s`
                <div class="col">
                    <form id="mdc-dialog-form-add" class="row">
                        ${c?"":s`
                            <div id="type-list" class="col">
                                <or-mwc-list @or-mwc-list-changed="${e=>{let t;1===e.detail.length&&(t=!!((n=e.detail[0].data)&&n.schema&&n.schema.oneOf),v.shadowRoot.getElementById("add-btn").disabled=t,v.requestUpdate())}}" .listItems="${p}" id="parameter-list"></or-mwc-list>
                            </div>
                        `}
                        <div id="parameter-desc" class="col">
                            ${!n?"":s`
                                <or-translate id="parameter-title" value="${n.label}"></or-translate>
                                <p>${n.description}</p>`}
                            ${!c?!e?"":s`
                                <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>`:s`
                                <style>
                                    #dynamic-wrapper > or-mwc-input {
                                        display: block;
                                        margin: 10px;
                                    }
                                </style>
                                <div id="dynamic-wrapper">
                                    <or-mwc-input required .type="${y.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:n.path.split(".").pop(),a=Object.assign({},this.data),r=c?o:n.schema;a[e]=Array.isArray(r.type)?null:(l?l.defaultValueCreator():void 0)||t(r,i),this.handleChange(this.path||"",a)},content:s`<or-mwc-input id="add-btn" .type="${y.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([l("or-json-forms-vertical-layout")],LayoutVerticalElement);export{LayoutVerticalElement};