import { LitElement, html, css } from 'lit-element'
import { connect } from 'pwa-helpers/connect-mixin.js'
import { store } from '../../reducer/store'

import '../../layouts/page-toolbar/page-toolbar'

import { signout } from '../../reducer/actions/actions-auth'

class UserProfile extends connect(store)(LitElement) {
  static get properties() {
    return {
      token: String,
      errorMessage: String,
      user: Object
    }
  }

  static get styles() {
    return [
      css`
        :host {
          display: flex;
          flex-direction: column;
          text-align: center;
        }

        div {
          text-align: center;
        }

        #token {
          display: inline-block;
          width: 50%;
          overflow-wrap: break-word;
          text-align: left;
          border: 1px solid tomato;
          padding: 2px;
        }
      `
    ]
  }

  render() {
    return html`
      <page-toolbar>
        <label>${this.board && this.board.name}</label> <span>${(this.board && this.board.description) || ''}</span>
      </page-toolbar>

      <div>
        <h3>User Profile</h3>

        <div>
          <p>Email: <b>${this.user.email}</b></p>
        </div>
        <div>
          <p>Token:</p>
          <div id="token">${this.token}</div>
        </div>

        <button @click="${() => store.dispatch(signout())}">Sign Out</button>
      </div>
    `
  }

  stateChanged(state) {
    this.token = state.auth.token
    this.errorMessage = state.auth.errorMessage
    this.user = state.auth.user || {}
  }
}

customElements.define('user-profile', UserProfile)
