import { Notifier } from '@dvn/alaca/global/notifier/models';
import { generateId } from '@dvn/core/util/generate';
import { Component, h, Host, State } from '@stencil/core';
import Tunnel from './notifier';
export class KhanguruMemberIndexPage {
  constructor() {
    this.notifications = [];
    this.notify = (notification) => {
      this.notifications = [
        ...this.notifications,
        Object.assign(Object.assign({}, notification), { id: notification.id || generateId() })
      ];
    };
    this.dismissNotification = (notification) => {
      this.notifications = this.notifications.filter(n => n.id !== notification.id);
    };
  }
  componentWillLoad() {
    this.notifier = new Notifier(this.notify);
  }
  render() {
    const { notifications } = this;
    return (h(Host, null,
      h(Tunnel.Provider, { state: { notifier: this.notifier } },
        h("div", { class: "notifications-container" }, notifications.map(notification => (h("notification-card", { key: notification.id, notification: notification, dismiss: this.dismissNotification })))),
        h("slot", null))));
  }
  static get is() { return "notifier-wrapper"; }
  static get originalStyleUrls() { return {
    "$": ["notifier-wrapper.css"]
  }; }
  static get styleUrls() { return {
    "$": ["notifier-wrapper.css"]
  }; }
  static get states() { return {
    "notifications": {}
  }; }
}
