import { LitElement, html, css } from 'lit'
import { connect } from 'pwa-helpers/connect-mixin.js'
import { store } from '@things-factory/shell'

export class NotificationBadge extends connect(store)(LitElement) {
  static get styles() {
    return [
      css`
        :host {
          font-size: 2em;
          margin: 0 5px 0 0;
          --badge-size: 14px;
        }

        mwc-icon {
          display: block;
        }

        [data-badge] {
          position: relative;
        }

        [data-badge]::after {
          content: attr(data-badge);
          position: absolute;
          top: 0px;
          right: -6px;
          font-family: var(--theme-font);
          font-size: 0.4em;
          background: var(--paper-deep-orange-a400);
          color: var(--theme-white-color);
          width: var(--badge-size);
          height: var(--badge-size);
          text-align: center;
          line-height: var(--badge-size);
          border-radius: 50%;
          box-shadow: var(--box-shadow);
        }

        [data-badge='0']::after {
          display: none;
        }
      `
    ]
  }

  static get properties() {
    return {
      badge: Number
    }
  }

  render() {
    var badge = this.badge || 0
    return html` <mwc-icon data-badge=${badge} class="badge">notifications_none</mwc-icon> `
  }

  stateChanged(state) {
    this.badge = state.notification.badge
  }
}

customElements.define('notification-badge', NotificationBadge)
