import { __decorate, __metadata } from "tslib";
import '@material/web/icon/icon.js';
import '@material/web/switch/switch.js';
import '@operato/i18n/ox-i18n.js';
import '@things-factory/setting-base';
import './notification-sender';
import Clipboard from 'clipboard';
import { css, html, LitElement } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { notify, openPopup } from '@operato/layout';
import { i18next, localize } from '@operato/i18n';
import { getSubscriptionToken, isSupportingMessaging, subscribe, unsubscribe } from '../actions/notification-fcm';
let NotificationSettingLet = class NotificationSettingLet extends localize(i18next)(LitElement) {
    static { this.styles = [
        css `
      div[onoff] {
        display: flex;
        align-items: center;
        border-bottom: var(--border-dim-color);
        margin-bottom: var(--spacing-medium);
        padding-bottom: var(--spacing-medium);
      }

      div[info] {
        display: flex;
        flex-direction: column;
        position: relative;
      }

      label {
        display: flex;
        gap: 10px;
        align-items: center;

        font: var(--label-font);
        color: var(--md-sys-color-on-surface);
        text-transform: var(--label-text-transform);
      }

      [test] {
        margin-left: auto;
      }

      input {
        border: var(--border-dim-color);
        border-radius: var(--border-radius);
        margin: var(--input-margin);
        padding: var(--input-padding);
        font: var(--input-font);

        flex: 1;
      }

      [button-in-field] {
        --md-icon-size: 18px;
        position: absolute;
        top: 24px;
        right: 4px;
        width: 30px;
        padding: 2px;
        border-radius: var(--border-radius, 5px);
        color: var(--md-sys-color-on-secondary, #fff);
        background-color: var(--md-sys-color-secondary, #394e64);
      }
    `
    ]; }
    render() {
        const supported = !!this.supported;
        return html `
      <setting-let>
        <ox-i18n slot="title" msgid="title.notification subscription"></ox-i18n>

        ${supported
            ? html `
              <div slot="content" onoff>
                <label>
                  <md-switch
                    label="allow message"
                    ?selected=${!!this.subscription}
                    @click=${e => this.onClickSwitch(e)}
                  ></md-switch>
                  ${String(i18next.t('label.allow push message'))}
                </label>
                <md-outlined-button test @click=${e => this.ontest()}
                  >${String(i18next.t('button.push message test'))}</md-outlined-button
                >
              </div>

              <div slot="content" info>
                <label for="subscription-token"><ox-i18n msgid="label.subscription token"></ox-i18n></label>
                <input
                  id="subscription-token"
                  type="text"
                  name="subscription-token"
                  .value=${this.subscription || ''}
                  readonly
                />
                <md-icon button-in-field clipboard-copy @click=${e => e.preventDefault()}>content_copy</md-icon>
              </div>
            `
            : html ` <div slot="content">${i18next.t('text.push notification is not supported in your browser')}</div>`}
      </setting-let>
    `;
    }
    updated(changes) {
        if (changes.has('supported') && this.supported) {
            const copybuttons = this.renderRoot.querySelectorAll('[clipboard-copy]');
            this.clipboard = new Clipboard(copybuttons, {
                target: trigger => trigger.parentElement.querySelector('input')
            });
        }
    }
    async connectedCallback() {
        super.connectedCallback();
        if (!('Notification' in window)) {
            return;
        }
        this.supported = await isSupportingMessaging();
        this.subscription = await getSubscriptionToken();
    }
    async onClickSwitch(e) {
        const target = e.target;
        const on = target.selected;
        if (!('Notification' in window)) {
            notify({
                level: 'error',
                message: i18next.t('This browser does not support desktop notification')
            });
            return;
        }
        try {
            if (Notification.permission !== 'granted') {
                const permission = await Notification.requestPermission();
                if (permission === 'denied') {
                    notify({
                        level: 'error',
                        message: i18next.t('text.web push notification unblock guide')
                    });
                }
                return;
            }
            if (Notification.permission === 'granted') {
                if (on) {
                    const subscription = await getSubscriptionToken();
                    if (subscription) {
                        this.subscription = subscription;
                        notify({
                            level: 'info',
                            message: i18next.t('text.notification subscribed already')
                        });
                    }
                    else {
                        this.subscription = await subscribe();
                        this.subscription &&
                            notify({
                                level: 'info',
                                message: i18next.t('text.notification subscribe started')
                            });
                    }
                }
                else {
                    if (this.subscription) {
                        await unsubscribe();
                        this.subscription = await getSubscriptionToken();
                        notify({
                            level: 'info',
                            message: i18next.t('text.notification unsubscribed')
                        });
                    }
                    else {
                        notify({
                            level: 'info',
                            message: i18next.t('text.notification unsubscribed already')
                        });
                    }
                }
            }
            else {
                notify({
                    level: 'error',
                    message: i18next.t('text.notification subscribing failed')
                });
            }
        }
        catch (err) {
            notify({
                level: 'error',
                message: String(err)
            });
        }
        finally {
            target.checked = !!this.subscription;
        }
    }
    ontest() {
        openPopup(html ` <notification-sender></notification-sender> `, {
            backdrop: true,
            size: 'large',
            title: i18next.t('title.notification-sender')
        });
    }
};
__decorate([
    property({ type: Object }),
    __metadata("design:type", Object)
], NotificationSettingLet.prototype, "subscription", void 0);
__decorate([
    property({ type: Boolean }),
    __metadata("design:type", Boolean)
], NotificationSettingLet.prototype, "supported", void 0);
NotificationSettingLet = __decorate([
    customElement('notification-setting-let')
], NotificationSettingLet);
export { NotificationSettingLet };
//# sourceMappingURL=notification-setting-let.js.map