import { __decorate, __metadata } from "tslib";
import '@material/web/icon/icon.js';
import '@material/web/button/elevated-button.js';
import './notification-item';
import { LitElement, html, css } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { connect } from 'pwa-helpers';
import { store, notificationStore } from '@operato/shell';
import { i18next, localize } from '@operato/i18n';
import { UPDATE_NOTIFICATION } from '../actions/notification-fcm';
let NotificationList = class NotificationList extends connect(store)(localize(i18next)(LitElement)) {
    constructor() {
        super(...arguments);
        this.history = [];
    }
    render() {
        var history = this.history.reverse();
        return history.length > 0
            ? html `
          <div notifications-wrap>
            <div>
              <strong>${i18next.t('label.notification list')}</strong>
              <md-elevated-button outlined dense @click=${e => this.onclearall()}
                ><md-icon slot="icon">delete_outline</md-icon>${String(i18next.t('label.clear all'))}</md-elevated-button
              >
            </div>
            ${history.map(notification => html `
                <notification-item
                  @close=${e => {
                this.onClose(notification);
            }}
                  .type=${notification.type}
                  .notification=${notification}
                ></notification-item>
              `)}
          </div>
        `
            : html `
          <div no-notifications @click=${e => window.history.back()}>
            <md-icon>notifications_off</md-icon>${i18next.t('text.no notification available')}
          </div>
        `;
    }
    onClose(notification) {
        const { id } = notification;
        store.dispatch((async (dispatch) => {
            if (notification) {
                await notificationStore.delete(id);
            }
            const history = await notificationStore.getAll();
            dispatch({
                type: UPDATE_NOTIFICATION,
                history: [...history]
            });
        }));
    }
    onclearall() {
        store.dispatch((async (dispatch) => {
            await notificationStore.clear();
            const history = await notificationStore.getAll();
            dispatch({
                type: UPDATE_NOTIFICATION,
                history: [...history]
            });
        }));
    }
    stateChanged(state) {
        this.history = state.notification.history;
    }
    async disconnectedCallback() {
        super.disconnectedCallback();
        await Promise.all(this.history
            .filter(notification => !notification.confirmed)
            .map(async (notification) => {
            return await notificationStore.put(Object.assign(Object.assign({}, notification), { confirmed: true }));
        }));
        store.dispatch((async (dispatch) => {
            const history = await notificationStore.getAll();
            dispatch({
                type: UPDATE_NOTIFICATION,
                history: [...history]
            });
        }));
    }
};
NotificationList.styles = [
    css `
      :host {
        display: block;
        background-color: var(--md-sys-color-surface);
        box-shadow: var(--box-shadow);
        margin-right: var(--spacing-large);
        padding: var(--spacing-medium);
        max-height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
      }

      [notifications-wrap] {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
      }
      [notifications-wrap] div {
        align-items: stretch;
        border-bottom: 1px solid var(--md-sys-color-primary);
      }
      [notifications-wrap] strong {
        color: var(--md-sys-color-primary);
        text-transform: capitalize;
        line-height: 2;
      }
      [notifications-wrap] md-elevated-button {
        --md-elevated-button-container-height: 24px;
        float: right;
        padding-inline-start: 6px;
        padding-inline-end: 12px;
      }
      [no-notifications] {
        margin: 0;
        padding: var(--spacing-large);
        text-align: center;
        font-size: var(--fontsize-default);
        font-weight: bold;
        color: var(--md-sys-color-secondary);
      }
      div md-icon {
        display: block;
        opacity: 0.3;
      }
      @media screen and (max-width: 480px) {
        :host {
          height: 100%;
          width: 100vw;
        }
      }
    `
];
__decorate([
    property({ type: Array }),
    __metadata("design:type", Array)
], NotificationList.prototype, "history", void 0);
NotificationList = __decorate([
    customElement('notification-list')
], NotificationList);
export { NotificationList };
//# sourceMappingURL=notification-list.js.map