import '@material/web/icon/icon.js'

import { LitElement, html, css } from 'lit'
import { customElement, property } from 'lit/decorators.js'

import { connect } from 'pwa-helpers/connect-mixin.js'
import { store } from '@operato/shell'

@customElement('notification-badge')
export class NotificationBadge extends connect(store)(LitElement) {
  static styles = [
    css`
      :host {
        font-size: 2em;
        position: relative;
      }

      md-icon {
        display: block;
      }

      :host::after {
        content: attr(data-badge);
        position: absolute;
        top: 0px;
        right: -6px;
        font-family: var(--theme-font);
        font-size: 0.3em;
        background: var(--md-sys-color-error, rgb(186 26 26));
        color: var(--md-sys-color-on-primary);
        width: 14px;
        height: 14px;
        text-align: center;
        line-height: 14px;
        border-radius: 50%;
        box-shadow: var(--box-shadow);
      }

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

  @property({ type: Number, attribute: 'data-badge', reflect: true }) badge?: number

  render() {
    return html` <md-icon>notifications_none</md-icon> `
  }

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