import { __decorate } from "tslib";
import '@material/web/button/elevated-button.js';
import '@material/web/checkbox/checkbox.js';
import '@material/web/textfield/filled-text-field.js';
import '@operato/i18n/ox-i18n.js';
import { css, html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { auth } from '@things-factory/auth-base/dist-client/auth.js';
import { i18next, localize } from '@operato/i18n';
import { ScrollbarStyles } from '@operato/styles';
import { notify as webpushNotify } from '../actions/notification-fcm';
let NotificationSender = class NotificationSender extends localize(i18next)(LitElement) {
    render() {
        var _a;
        return html `
      <form>
        <div content>
          <md-filled-text-field
            type="text"
            name="receivers"
            label=${String(i18next.t('field.receivers'))}
            placeholder=${(_a = auth.credential) === null || _a === void 0 ? void 0 : _a.email}
            required
            ><md-icon slot="leading-icon">account_circle</md-icon></md-filled-text-field
          >
          <md-filled-text-field type="text" name="title" label=${String(i18next.t('field.title'))} required
            ><md-icon slot="leading-icon">notifications_none</md-icon></md-filled-text-field
          >

          <md-filled-text-field type="text" name="image" label=${String(i18next.t('field.image'))}
            ><md-icon slot="leading-icon">insert_photo</md-icon></md-filled-text-field
          >
          <md-filled-text-field type="text" name="url" label=${String(i18next.t('field.url'))}
            ><md-icon slot="leading-icon">link</md-icon></md-filled-text-field
          >
          <md-filled-text-field
            type="textarea"
            name="body"
            label=${String(i18next.t('field.body'))}
            required
            rows="5"
          ></md-filled-text-field>
          <label>
            <md-checkbox name="inappmsg"></md-checkbox>
            In-App Message
          </label>
        </div>

        <div buttons>
          <md-elevated-button raised icon="send" @click=${e => this.ontest()}>
            <ox-i18n msgid="button.notification-send"> </ox-i18n>
          </md-elevated-button>

          <md-elevated-button type="reset" outlined @click=${e => this.onReset()}>
            <ox-i18n msgid="button.reset"> </ox-i18n>
          </md-elevated-button>
        </div>
      </form>
    `;
    }
    ontest() {
        const [receivers, title, body, image, url] = ['receivers', 'title', 'body', 'image', 'url'].map(key => this.renderRoot.querySelector(`[name="${key}"]`).value);
        const mode = this.renderRoot.querySelector(`[name="inappmsg"]`).checked ? 'inapp' : 'background';
        webpushNotify({
            receivers,
            title,
            body,
            image,
            mode,
            url
        });
    }
    onReset() {
        ;
        ['receivers', 'title', 'body', 'image', 'url'].map(key => (this.renderRoot.querySelector(`[name="${key}"]`).value = ''));
        this.renderRoot.querySelector(`[name="inappmsg"]`).checked = false;
    }
};
NotificationSender.styles = [
    ScrollbarStyles,
    css `
      :host {
        display: flex;
        padding: var(--spacing-large);
        background-color: var(--md-sys-color-background);
        color: var(--md-sys-color-on-background);
      }

      form {
        flex: 1;
        display: flex;
        flex-direction: column;
      }

      [content] > * {
        margin: var(--spacing-medium);
      }

      [content] {
        flex: 1;
        flex-direction: column;
        display: flex;
        overflow: auto;
      }

      [buttons] {
        margin-top: auto;
        display: flex;
        flex-direction: row-reverse;
      }

      [name='body'] {
        resize: vertical;
      }

      md-elevated-button {
        margin-left: var(--spacing-medium);
      }

      label {
        display: flex;
        gap: var(--spacing-medium);
        align-items: center;
      }

      @media screen and (max-width: 480px) {
        :host {
          padding: var(--spacing-medium);
        }
      }
    `
];
NotificationSender = __decorate([
    customElement('notification-sender')
], NotificationSender);
export { NotificationSender };
//# sourceMappingURL=notification-sender.js.map