var __decorate=this&&this.__decorate||function(t,e,o,n){var i,r=arguments.length,a=r<3?e:null===n?n=Object.getOwnPropertyDescriptor(e,o):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,o,n);else for(var l=t.length-1;l>=0;l--)(i=t[l])&&(a=(r<3?i(a):r>3?i(e,o,a):i(e,o))||a);return r>3&&a&&Object.defineProperty(e,o,a),a},__awaiter=this&&this.__awaiter||function(t,e,o,n){return new(o||(o=Promise))(function(i,r){function a(t){try{c(n.next(t))}catch(t){r(t)}}function l(t){try{c(n.throw(t))}catch(t){r(t)}}function c(t){var e;t.done?i(t.value):((e=t.value)instanceof o?e:new o(function(t){t(e)})).then(a,l)}c((n=n.apply(t,e||[])).next())})};import{html as t,LitElement as e,css as o}from"lit";import{customElement as n,property as i}from"lit/decorators.js";import{InputType as r}from"@openremote/or-mwc-components/or-mwc-input";import{i18next as a,translate as l}from"@openremote/or-translate";import{OrRulesJsonRuleChangedEvent as c}from"../or-rule-json-viewer";import{until as u}from"lit/directives/until.js";import{when as s}from"lit/directives/when.js";let OrRuleFormPushNotification=class extends l(a)(e){static get styles(){return o`
            .input-small {
                min-width: auto;
            }

            or-mwc-input {
                margin-bottom: 20px;
                min-width: 420px;
                width: 100%;
            }

            .divider {
                margin-bottom: 20px;
                border-top: 1px solid rgba(0, 0, 0, 12%);
            }
        `}render(){return t`
            ${s(this.message,()=>u(this._getPushNotificationForm(this.message),t`Loading...`),()=>t`<or-translate value="errorOccurred"></or-translate>`)}
        `}_getPushNotificationForm(e){return __awaiter(this,arguments,void 0,function*(e,o=(t,e)=>__awaiter(this,void 0,void 0,function*(){return e})){var n,i,l,c,u,s;return t`
            <form style="display:grid">
                <or-mwc-input .value="${e.title}"
                              @or-mwc-input-changed="${t=>o(t,e).then(e=>this._onTitleChange(t,e))}"
                              .label="${a.t("subject")}"
                              type="${r.TEXT}"
                              required
                              placeholder=" "></or-mwc-input>

                <or-mwc-input .value="${e.body}"
                              @or-mwc-input-changed="${t=>o(t,e).then(e=>this._onBodyChange(t,e))}"
                              .label="${a.t("message")}"
                              type="${r.TEXTAREA}"
                              required
                              placeholder=" "></or-mwc-input>
                <or-mwc-input .value="${null==(n=e.action)?void 0:n.url}"
                              @or-mwc-input-changed="${t=>o(t,e).then(e=>this._onActionUrlChange(t,e))}"
                              .label="${a.t("openWebsiteUrl")}"
                              type="${r.TEXT}"
                              placeholder=" "></or-mwc-input>

                <!-- Open in browser switch -->
                <or-mwc-input .value="${null==(i=e.action)?void 0:i.openInBrowser}"
                              @or-mwc-input-changed="${t=>o(t,e).then(e=>this._onOpenInBrowserChange(t,e))}"
                              .label="${a.t("openInBrowser")}"
                              type="${r.SWITCH}"
                              fullWidth
                              placeholder=" "></or-mwc-input>

                <!-- Button controls -->
                <div style="display: flex; gap: 20px;">
                    <or-mwc-input .value="${null==(c=null==(l=e.buttons)?void 0:l[0])?void 0:c.title}"
                                  @or-mwc-input-changed="${t=>o(t,e).then(e=>this._onButtonTitleChange(t,0,e))}"
                                  .label="${a.t("buttonTextConfirm")}"
                                  type="${r.TEXT}"
                                  class="input-small"
                                  placeholder=" "></or-mwc-input>
                    <or-mwc-input .value="${null==(s=null==(u=e.buttons)?void 0:u[1])?void 0:s.title}"
                                  @or-mwc-input-changed="${t=>o(t,e).then(e=>this._onButtonTitleChange(t,1,e))}"
                                  .label="${a.t("buttonTextDecline")}"
                                  type="${r.TEXT}"
                                  class="input-small"
                                  placeholder=" "></or-mwc-input>
                </div>
            </form>
        `})}_onTitleChange(t,e){e.title=t.detail.value,this.dispatchEvent(new c)}_onBodyChange(t,e){e.body=t.detail.value,this.dispatchEvent(new c)}_onActionUrlChange(t,e){e.action=e.action||{},e.action.url=t.detail.value,this.dispatchEvent(new c)}_onOpenInBrowserChange(t,e){e.action=e.action||{},e.action.openInBrowser=t.detail.value,this.dispatchEvent(new c)}_onButtonTitleChange(t,e,o){o.buttons=o.buttons||[],o.buttons[e]={title:t.detail.value},this.dispatchEvent(new c)}};__decorate([i({type:Object})],OrRuleFormPushNotification.prototype,"message",void 0),OrRuleFormPushNotification=__decorate([n("or-rule-form-push-notification")],OrRuleFormPushNotification);export{OrRuleFormPushNotification};