import { LitElement, html, css } from 'lit'
import { auth } from '@things-factory/auth-base'
import { i18next, localize } from '@things-factory/i18n-base'
import { ScrollbarStyles } from '@things-factory/styles'
import { notify as webpushNotify } from '../actions/notification-fcm'

import '@material/mwc-formfield'
import '@material/mwc-button'
import '@material/mwc-checkbox'

export class NotificationSender extends localize(i18next)(LitElement) {
  static get styles() {
    return [
      ScrollbarStyles,
      css`
        :host {
          display: flex;
          background-color: var(--main-section-background-color);
          padding: var(--padding-wide);
        }

        form {
          flex: 1;
          display: flex;
          flex-direction: column;
        }
        [content] > * {
          margin: var(--margin-default);
        }

        [content] {
          flex: 1;
          flex-direction: column;
          display: flex;
          overflow: auto;
        }

        [buttons] {
          margin-top: auto;
          display: flex;
          flex-direction: row-reverse;
        }
        mwc-button {
          margin-left: var(--padding-default);
        }

        @media screen and (max-width: 480px) {
          :host {
            padding: var(--padding-default);
          }
        }
      `
    ]
  }

  static get properties() {
    return {}
  }

  render() {
    return html`
      <form>
        <div content>
          <mwc-textfield
            type="text"
            name="receivers"
            label=${i18next.t('field.receivers')}
            placeholder=${auth.credential?.email}
            required
            icon="account_circle"
          ></mwc-textfield>
          <mwc-textfield
            type="text"
            name="title"
            label=${i18next.t('field.title')}
            required
            icon="notifications_none"
          ></mwc-textfield>

          <mwc-textfield type="text" name="image" label=${i18next.t('field.image')} icon="insert_photo"></mwc-textfield>
          <mwc-textfield type="text" name="url" label=${i18next.t('field.url')} icon="link"></mwc-textfield>
          <mwc-textarea type="text" name="body" label=${i18next.t('field.body')} required rows="5"></mwc-textarea>
          <mwc-formfield label="In-App Message">
            <mwc-checkbox name="inappmsg"></mwc-checkbox>
          </mwc-formfield>
        </div>

        <div buttons>
          <mwc-button raised icon="send" @click=${e => this.ontest()}>
            <i18n-msg msgid="button.notification-send"> </i18n-msg>
          </mwc-button>

          <mwc-button type="reset" outlined @click=${e => this.onreset()}>
            <i18n-msg msgid="button.reset"> </i18n-msg>
          </mwc-button>
        </div>
      </form>
    `
  }

  ontest() {
    const [receivers, title, body, image, url] = ['receivers', 'title', 'body', 'image', 'url'].map(
      key => this.renderRoot.querySelector(`[name="${key}"]`).value
    )
    const mode = this.renderRoot.querySelector(`[name="inappmsg"]`).checked ? 'inapp' : 'background'

    webpushNotify({
      receivers,
      title,
      body,
      image,
      mode,
      url
    })
  }

  onreset() {
    ;['receivers', 'title', 'body', 'image', 'url'].map(
      key => (this.renderRoot.querySelector(`[name="${key}"]`).value = '')
    )
    this.renderRoot.querySelector(`[name="inappmsg"]`).checked = false
  }
}

customElements.define('notification-sender', NotificationSender)
