var __decorate=this&&this.__decorate||function(e,t,o,i){var r,a=arguments.length,s=a<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,i);else for(var h=e.length-1;h>=0;h--)(r=e[h])&&(s=(a<3?r(s):a>3?r(t,o,s):r(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};import{InputType as e}from"@openremote/or-mwc-components/or-mwc-input";import{i18next as t}from"@openremote/or-translate";import{css as o,html as i,LitElement as r}from"lit";import{customElement as a,property as s,state as h}from"lit/decorators.js";import{when as n}from"lit/directives/when.js";import{OrRulesJsonRuleChangedEvent as d}from"../or-rule-json-viewer";let styling=o`
    .divider {
        border-bottom: 1px solid rgba(0, 0, 0, 12%);
    }
`,OrRuleFormWebhook=class extends r{constructor(){super(...arguments),this.loading=!1,this.httpMethodOptions=["GET","POST","PUT","DELETE"],this.authMethodOptions=new Map([["username_password",t.t("username")+" & "+t.t("password")],["client_credentials","oauth Client Credentials Grant"],["password","oauth Password Grant"]])}static get styles(){return[styling]}shouldUpdate(e){return e.has("webhook")&&void 0==this.webhook.headers&&(this.webhook.headers={}),super.shouldUpdate(e)}getAuthMethod(e){return void 0!=e.oAuthGrant?this.authMethodOptions.get(e.oAuthGrant.grant_type):this.authMethodOptions.get("username_password")}getOAuthGrant(e){return"client_credentials"==e||"password"==e?{grant_type:e}:void 0}reloadHeaders(){this.loading=!0,this.updateComplete.then(()=>this.loading=!1),this.notifyWebhookUpdate(!1)}notifyWebhookUpdate(e=!0){e&&this.requestUpdate("webhook"),this.dispatchEvent(new d)}render(){return n(!this.webhook,()=>i`
            ${t.t("errorOccurred")}
        `,()=>i`
            <form style="display: flex; flex-direction: column; min-width: 520px;">
                <!-- HTTP Method & URL -->
                <div style="display: flex; flex-direction: row; align-items: center; gap: 5px; margin-bottom: 28px;">
                    <or-mwc-input style="flex: 0;" type="${e.SELECT}" .value="${this.webhook.httpMethod}"
                                  .options="${this.httpMethodOptions}"
                                  @or-mwc-input-changed="${e=>{this.webhook.httpMethod=e.detail.value,this.notifyWebhookUpdate()}}"
                    ></or-mwc-input>
                    <or-mwc-input style="flex: 1;" type="${e.URL}" required label="${t.t("webUrl")}"
                                  .value="${this.webhook.url}" helperPersistent
                                  @or-mwc-input-changed="${e=>{this.webhook.url=e.detail.value,this.notifyWebhookUpdate()}}"></or-mwc-input>
                </div>
                <!-- Headers -->
                <div style="display: flex; flex-direction: column; gap: 5px; margin-bottom: 28px;">
                    <span>Headers</span>
                    ${n(this.loading,()=>i`
                        ${this.getHeadersTemplate(this.webhook.headers,!0)}
                    `,()=>i`
                        ${this.getHeadersTemplate(this.webhook.headers,!1)}
                    `)}
                    <or-mwc-input type="${e.BUTTON}" icon="plus" label="addRequestHeader"
                                  @or-mwc-input-changed="${e=>{(this.webhook.headers?this.webhook.headers[""]:void 0)!=void 0?this.webhook.headers[""].push(""):this.webhook.headers[""]=[""],this.reloadHeaders()}}"></or-mwc-input>
                </div>
                <!-- Authorization -->
                <div style="display: flex; flex-direction: column; gap: 10px; margin-bottom: ${this.webhook.oAuthGrant||this.webhook.usernamePassword?"28px":"0"};">
                    <or-mwc-input type="${e.SWITCH}" fullwidth label="${t.t("requiresAuthorization")}"
                                  .value="${this.webhook.oAuthGrant||this.webhook.usernamePassword}"
                                  @or-mwc-input-changed="${e=>{this.webhook.usernamePassword=e.detail.value?{username:"admin",password:"secret"}:void 0,this.notifyWebhookUpdate()}}"></or-mwc-input>
                    ${n(this.webhook.oAuthGrant||this.webhook.usernamePassword,()=>{let o=Array.from(this.authMethodOptions.values());return i`
                            <or-mwc-input type="${e.SELECT}" label="${t.t("method")}"
                                          .value="${this.getAuthMethod(this.webhook)}"
                                          .options="${o}"
                                          @or-mwc-input-changed="${e=>{let t=[...this.authMethodOptions.entries()].find(t=>t[1]==e.detail.value);this.webhook.oAuthGrant=this.getOAuthGrant(t[0]),this.notifyWebhookUpdate()}}"></or-mwc-input>
                            ${this.getAuthSettingsTemplate(this.webhook)}
                        `})}
                </div>
                <!-- Payload -->
                <div style="display: flex; flex-direction: column; gap: 5px;">
                    ${n("GET"!=this.webhook.httpMethod&&"DELETE"!=this.webhook.httpMethod,()=>i`
                        <or-mwc-input type="${e.SWITCH}" fullwidth label="${t.t("includeBodyInRequest")}"
                                      .value="${void 0!=this.webhook.payload}"
                                      @or-mwc-input-changed="${e=>{this.webhook.payload=e.detail.value?JSON.stringify({rule:"%RULESET_NAME%",assets:"%TRIGGER_ASSETS%"},null,4):void 0,this.notifyWebhookUpdate()}}"
                        ></or-mwc-input>
                        ${n(void 0!=this.webhook.payload,()=>i`
                                <or-mwc-input type="${e.TEXTAREA}" .value="${this.webhook.payload}"
                                              @or-mwc-input-changed="${e=>{this.webhook.payload=e.detail.value,this.notifyWebhookUpdate()}}"></or-mwc-input>
                            `)}
                    `)}
                </div>
            </form>
        `)}getHeadersTemplate(o,r){return Object.keys(this.webhook.headers).sort((e,t)=>-e.localeCompare(t)).map((o,a,s)=>{let h=this.webhook.headers[o];return h.map((a,s)=>i`
                    <div style="display: flex; gap: 5px;">
                        <or-mwc-input type="${e.TEXT}" label="${t.t("header")}" value="${o}"
                                      style="flex: 1;" .disabled="${r}"
                                      @or-mwc-input-changed="${e=>{h.length>0?h.splice(s,1):delete this.webhook.headers[o];let t=this.webhook.headers[e.detail.value];t&&t.length>0?t.push(a):this.webhook.headers[e.detail.value]=[a],this.reloadHeaders()}}"
                        ></or-mwc-input>
                        <or-mwc-input type="${e.TEXT}" label="${t.t("value")}" value="${a}"
                                      style="flex: 1;" .disabled="${r}"
                                      @or-mwc-input-changed="${e=>{this.webhook.headers[o][s]=e.detail.value,this.notifyWebhookUpdate()}}"
                        ></or-mwc-input>
                        <or-mwc-input type="${e.BUTTON}" icon="delete" .disabled="${r}"
                                      @or-mwc-input-changed="${()=>{h.splice(s,1),this.reloadHeaders()}}"></or-mwc-input>
                    </div>
                `)})}getAuthSettingsTemplate(o){var r,a;let s=o.oAuthGrant;return void 0==s?i`
                <div style="display: flex; flex-direction: column; gap: 10px;">
                    <or-mwc-input type="${e.TEXT}" label="${t.t("username")}"
                                  .value="${null==(r=o.usernamePassword)?void 0:r.username}"
                                  @or-mwc-input-changed="${e=>{this.webhook.usernamePassword||(this.webhook.usernamePassword={}),this.webhook.usernamePassword.username=e.detail.value,this.notifyWebhookUpdate()}}"></or-mwc-input>
                    <or-mwc-input type="${e.TEXT}" label="${t.t("password")}"
                                  .value="${null==(a=this.webhook.usernamePassword)?void 0:a.password}"
                                  @or-mwc-input-changed="${e=>{this.webhook.usernamePassword||(this.webhook.usernamePassword={}),this.webhook.usernamePassword.password=e.detail.value,this.notifyWebhookUpdate()}}"></or-mwc-input>
                </div>
            `:i`
                <div style="display: flex; flex-direction: column; gap: 10px;">
                    <div style="display: flex; flex-direction: row; align-items: center; gap: 5px;">
                        <or-mwc-input style="flex: 1;" type="${e.URL}" required
                                      label="${t.t("tokenUrl")}" .value="${s.tokenEndpointUri}"
                                      @or-mwc-input-changed="${e=>{s.tokenEndpointUri=e.detail.value,this.notifyWebhookUpdate()}}"></or-mwc-input>
                    </div>
                    ${n(void 0!=s.grant_type,()=>{switch(s.grant_type){case"client_credentials":return i`
                                    <or-mwc-input type="${e.TEXT}" label="${t.t("clientId")}"
                                                  .value="${s.client_id}"
                                                  @or-mwc-input-changed="${e=>{s.client_id=e.detail.value,this.notifyWebhookUpdate()}}"></or-mwc-input>
                                    <or-mwc-input type="${e.PASSWORD}" label="${t.t("clientSecret")}"
                                                  .value="${s.client_secret}"
                                                  @or-mwc-input-changed="${e=>{s.client_secret=e.detail.value,this.notifyWebhookUpdate()}}"></or-mwc-input>
                                `;case"password":return i`
                                    <or-mwc-input type="${e.TEXT}" label="${t.t("username")}"
                                                  .value="${s.username}"
                                                  @or-mwc-input-changed="${e=>{s.username=e.detail.value,this.notifyWebhookUpdate()}}"></or-mwc-input>
                                    <or-mwc-input type="${e.TEXT}" label="${t.t("password")}"
                                                  .value="${s.password}"
                                                  @or-mwc-input-changed="${e=>{s.password=e.detail.value,this.notifyWebhookUpdate()}}"></or-mwc-input>
                                `;default:return i`${t.t("errorOccurred")}`}})}
                </div>
            `}};__decorate([s({type:Object})],OrRuleFormWebhook.prototype,"webhook",void 0),__decorate([h()],OrRuleFormWebhook.prototype,"loading",void 0),OrRuleFormWebhook=__decorate([a("or-rule-form-webhook")],OrRuleFormWebhook);export{OrRuleFormWebhook};