import { LitElement, html, css } from 'lit'
import { connect } from 'pwa-helpers'
import { store, notificationStore } from '@things-factory/shell'
import { UPDATE_NOTIFICATION } from '../actions/notification-fcm'
import { i18next, localize } from '@things-factory/i18n-base'

import '@material/mwc-icon'
import './notification-item'

export class NotificationList extends connect(store)(localize(i18next)(LitElement)) {
  static get styles() {
    return [
      css`
        :host {
          display: block;
          background-color: var(--theme-white-color);
          box-shadow: var(--box-shadow);
          margin-right: var(--margin-wide);
          padding: var(--padding-default);
          max-height: 100%;
          overflow-x: hidden;
          overflow-y: auto;
        }
        :host::before {
          content: '';
          width: 0px;
          height: 0px;
          border-left: 7px solid transparent;
          border-right: 7px solid transparent;
          border-bottom: 7px solid var(--theme-white-color);
          position: absolute;
          margin-top: -7px;
          right: 50px;
        }

        [notifications-wrap] {
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
        }
        [notifications-wrap] div {
          align-items: stretch;
          border-bottom: 1px solid var(--primary-color);
        }
        [notifications-wrap] strong {
          color: var(--primary-color);
          text-transform: capitalize;
          line-height: 2;
        }
        [notifications-wrap] mwc-button {
          float: right;
          --mdc-button-horizontal-padding: var(--padding-narrow);
          --mdc-typography-button-font-size: 0.75em;
        }
        [no-notifications] {
          margin: 0;
          padding: var(--padding-wide);
          text-align: center;
          font-size: var(--fontsize-default);
          font-weight: bold;
          color: var(--secondary-color);
        }
        div mwc-icon {
          display: block;
          opacity: 0.3;
        }
        @media screen and (max-width: 480px) {
          :host {
            height: 100%;
            width: 100vw;
          }
        }
      `
    ]
  }

  static get properties() {
    return {
      history: Array
    }
  }

  render() {
    var history = this.history.reverse()

    return history.length > 0
      ? html`
          <div notifications-wrap>
            <div>
              <strong>${i18next.t('label.notification list')}</strong>
              <mwc-button
                outlined
                dense
                label=${i18next.t('label.clear all')}
                icon="delete_outline"
                @click=${e => this.onclearall()}
              ></mwc-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()}>
            <mwc-icon>notifications_off</mwc-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(noti => !noti.confirmed)
        .map(async noti => {
          return await notificationStore.put({
            ...noti,
            confirmed: true
          })
        })
    )

    store.dispatch(async dispatch => {
      const history = await notificationStore.getAll()

      dispatch({
        type: UPDATE_NOTIFICATION,
        history: [...history]
      })
    })
  }
}

customElements.define('notification-list', NotificationList)
