import {observable, computed, action, extendObservable} from 'mobx';
import axios from 'axios';
import _ from 'lodash';

//validations
const isNotEmpty = {
  check: field => field !== undefined && field.trim() !== '',
  message: name => `${name} cannot be empty!`
}

//state
class AuthState {

  @observable loading = true;
  @observable loadingUser;
  @observable errors = [];
  @observable user;
  @observable email;
  @observable password;
  @observable submittedOnce = false;

  formFields = [
    {
      name: 'User',
      value: this.email,
      validations: [isNotEmpty]
    },
    {
      name: 'Password',
      value: this.password,
      validations: [isNotEmpty]
    }
  ].map(fieldDef => extendObservable(fieldDef, {value: fieldDef.value}))

  @action setEmail = email => this.email = email;
  @action setPassword = password => this.password = password;

  @computed get isFormValid() {
    return _.every(this.formFields, field => {
      return _.every(field.validations, validation => validation.check(field.value))
    });
  }

  @action checkAuth = () => {
    setTimeout(() => {
      this.loading = false;
    }, 500);
  }

  @action login = (email, password) => {
    this.submittedOnce = true;

    this.loadingUser = true;
    axios.post('/api/user/login', {
      email: this.email,
      password: this.password
    }).then(result => {
      this.errors = [];
      this.loadingUser = false;
      this.user = result;
    }).catch(error => {
      this.errors.push(error.data);
      this.loadingUser = false;
    });
  }

  @action logout = () => {
    this.user = undefined;
    this.loading = false;
    this.loadingUser = false;
    this.errors = [];
  }

}

export default AuthState;