import {Element as PolymerElement} from '@polymer/polymer/polymer-element';

import User from './../../lib/user';

import css from './style.postcss';
import template from './template.html';

// Import our main application component
import './../sk-app';

export default class AuthCheck extends PolymerElement {

  static get properties() {
    return {
      loading: {
        type: Boolean,
        value: true
      },
      loggedIn: {
        type: Boolean,
        value: false
      },
      user: {
        type: String
      },
      password: {
        type: String
      },
      error: {
        type: String
      }
    };
  }

  static get template() {
    return `<style>${css}</style> ${template}`;
  }

  constructor() {
    super();

    User.session()
      .then(() => {
        this.loading = false;
        this._setLogin();
      })
      .catch(err => {
        this.loading = false;
      });
  }

  _setLogin() {
    this.loggedIn = true;
  }

  _setError(err) {
    this.error = err.message;
  }

  _onSubmit(event) {
    event.preventDefault();
    User.login(this.user, this.password)
      .then(this._setLogin.bind(this))
      .catch(this._setError.bind(this));
  }

  _computeShowForm(loggedIn, loading) {
    return !loading && !loggedIn;
  }

}

window.customElements.define('auth-check', AuthCheck);