<template> <!--v-if="!this.submitSuccess && this.props.user && Object.keys(this.props.user).length === 0">-->
  <form @submit="handleSubmit">
    <label htmlFor='Username'>
      <div class='inputFormLabel'>Username</div>
      <div class='inputFormContainer'>
        <input
          class='inputFormSpacer inputForm'
          type='text'
          v-model='form.username'
          size='40'
          placeholder='Username'
          @change='this.handleChange'
        />
        <!--<div class='inputFormError'>{{this.getErrorMessage('username')}}</div>-->
      </div>
    </label>
    <br />
    <label htmlFor='Password'>
      <div class='inputFormLabel'>Password</div>
      <div class='inputFormContainer'>
        <input
          class='inputFormSpacer inputForm'
          type='password'
          v-model='form.password'
          size='40'
          placeholder='Password'
          @change='this.handleChange'
        />
        <!--<div class='inputFormError'>{{this.getErrorMessage('password')}}</div>-->
      </div>
    </label>
    <br />
    <div class='formErrorSpacer inputFormError'>{{this.error}}</div>
    <button class='button' type="submit">Submit</button>
  </form>
</template>
<!--<template v-else>-->
  <!--<div>-->
    <!--window.location.href = '/'-->
  <!--</div>-->
<!--</template>-->

<script>
import { mapState, mapMutations } from 'vuex';
import InputFormComponent from './InputFormComponent';
import { post } from '../util/RequestUtil';
import { loginRules } from '../../../resources/validation/validationRules';
import { createAuthObj, createLoginRequestConfig } from '../util/AppUtil';


export default {
  name: 'loginForm',
  // props: {
  //   user: Object,
  //   // addUser: Function
  // },
  data() {
    return {
      form: {
        name: 'loginForm',
        username: '',
        password: '',
      },
    };
  },
  computed: {
    ...mapState({
      username: state => state.username,
      password: state => state.password,
      error: state => state.error,
    }),
  },
  components: InputFormComponent,
  methods: {
    ...mapMutations([
      'ADD_USER',
    ]),
    addUser(user) {
      this.ADD_USER(user);
      this.user = {};
    },
    getErrorMessage(paramName) {
      let errorMessage = '';

      if (paramName === 'username' && this.error !== '') {
        errorMessage = this.usernameError;
      } else if (this.validationErrors[paramName] && this.validationErrors[paramName] !== '') {
        errorMessage = this.validationErrors[paramName];
      }

      return errorMessage;
    },
    validateParam(paramName, paramValue) {
      const validationRule = loginRules[paramName],
            validationErrors = this.validationErrors;

      if (paramValue === '') {
        validationErrors[paramName] = validationRule.messageMissing;

        this.validationErrors = validationErrors;
      } else if (this.form.username !== '' && this.form.password !== '' && validationRule.required && paramValue.search(validationRule.regexRule)) {
        this.$store.commit('setError', loginRules.login.message);
      } else {
        delete validationErrors[paramName];

        this.validationErrors = validationErrors;
      }
    },
    validate() {
      this.validationErrors = {};
      this.$store.commit('setError', '');

      this.validateParam('username', this.form.username);
      this.validateParam('password', this.form.password);
    },
    isFormValid() {
      return this.formReady && Object.keys(this.validationErrors).length === 0;
    },
    isFormInvalid() {
      return !this.isFormValid();
    },
    handleChange(event) {
      this[event.target.name] = event.target.value;
    },
    handleSubmit(event) {
      event.preventDefault();

      this.validate();

      this.formReady = true;

      if (this.isFormValid()) {
        const requestData = {
                username: this.form.username,
                password: this.form.password,
              },
              requestConfig = createLoginRequestConfig(requestData);

        return post(requestConfig).then(response => {
          if (response.status === 200 && response.headers['x-auth-token'] && response.data) {
            const result = response.data;

            if (result.data && Object.keys(result.data).length > 0) {
              const userData = result.data,
                    authToken = response.headers['x-auth-token'],
                    authObj = createAuthObj(userData, authToken);

              localStorage.setItem('authObj', authObj);

              this.submitSuccess = true;
              // this.addUser(userData);
            }
          } else {
            this.submitSuccess = false;

            // console.log('INVALID FORM response', response);

            if (response.validationErrors) {
              if (response.validationErrors.username) {
                this.$store.commit('setError', response.validationErrors.username);
              } else if (response.validationErrors.error) {
                this.$store.commit('setError', response.validationErrors.error);
              }
            }
          }
        })
        .catch((err) => {
          // console.error(err);

          this.$store.commit('setError', 'There was a problem accessing your account');
        });
      } else {
        console.log('INVALID FORM validationErrors', this.validationErrors);
      }
    },
  },
};
</script>