<template>
  <ods-form class="login-form__form login-form__form--password"
    :model='passwordForm'
    :rules='rules'
    ref='passwordForm'
    :hide-required-asterisk="true">
    <template v-if="passwordChange===0">
      <div>
        <h1 class="login-form__title"> {{ $t('password.title') }} </h1>
        <p class="ods-mb-5 small login-form__small login-form__errors"> {{ $t('password.message') }} </p>
          <ods-alert
            data-id="error-alert"
            v-show="errors"
            :title="$t('password.error')"
            type="error"
            :closable="false"/>
        <ods-form-item class="ods-mb-3" :label="$t('login.user')" prop='user'>
          <ods-input
            data-id="username-input"
            :class="{error: errors}"
            type="text"
            v-model="passwordForm.user"/>
        </ods-form-item>
        <ods-form-item :label="$t('password.currentPassword')">
          <ods-input
            data-id="current-password-input"
            :class="{error: errors}"
            type="password"
            v-model="passwordForm.currentPassword"/>
        </ods-form-item>
        <ods-form-item class="ods-mb-3" :label="$t('password.newPassword')" >
          <ods-input
            data-id="new-password-input"
            :class="{error: errors}"
            type="password"
            v-model="passwordForm.newPassword"/>
        </ods-form-item>
        <ods-form-item :label="$t('password.newPassword2')">
          <ods-input
            data-id="repeat-password-input"
            :class="{error: errors}"
            type="password"
            v-model="passwordForm.newPassword2"/>
        </ods-form-item>
      </div>
      <div class="ods-mt-8 login-form__actions">
        <router-link to="/login" tag="div">
          <ods-button data-id="back-button" class="ods-p-0" type="text"> {{ $t('password.goBack') }} </ods-button>
        </router-link>
        <ods-button
          data-id="submit-button"
          type='primary'
          native-type="submit"
          @click.prevent="submitForm('passwordForm')"> {{ $t('password.submitButton') }} </ods-button>
      </div>
    </template>
    <div class="password-messages" v-else>
      <div>
        <template v-if="passwordChange===1">
          <img src="../../assets/images/login/email-sent.svg"/>
          <p> {{ $t('password.emailSubmitted') }} </p>
        </template>
        <template v-else-if="passwordChange===-1">
          <img src="../../assets/images/login/email-error.svg"/>
          <p> {{ $t('password.emailError') }} </p>
        </template>
        <template v-else-if="passwordChange===-2">
          <img src="../../assets/images/login/email-error.svg"/>
          <p> {{ $t('serverError') }}</p>
        </template>
        <p v-if="userEmail"> {{ userEmail }}</p>
      </div>
      <router-link to="/login" tag="div">
        <ods-button data-id="close-error" type='primary'> {{ $t('password.done') }} </ods-button>
      </router-link>
    </div>
  </ods-form>
</template>

<script>
import {mapActions} from 'vuex';
import FormStyles from './LoginFormStyles.vue';

export default {
  name: 'LoginPasswordForm',
  mixins: [FormStyles],
  data() {
    return {
      passwordForm: {
        user: '',
        oldPassword: '',
        newPassword: '',
        newPassword2: '',
      },
      rules: {
        user: [
          {
            required: true,
            message: this.$t('login.rules.user'),
            trigger: 'submit',
          },
        ],
        currentPassword: [
          {
            required: true,
            message: this.$t('password.rules.currentPassword'),
            trigger: 'submit',
          },
        ],
        newPassword: [
          {
            required: true,
            message: this.$t('password.rules.newPassword'),
            trigger: 'submit',
          },
        ],
        newPassword2: [
          {
            required: true,
            message: this.$t('password.rules.newPassword2'),
            trigger: 'submit',
          },
        ],
      },
      errors: false,
      passwordChange: 0, // TODO
    };
  },
  methods: {
    ...mapActions(['login', 'loader']),
    submitForm(formName) {
      const _this = this;
      this.$refs[formName].validate(async (valid) => {
        if (valid && (this.passwordForm.newPassword === this.passwordForm.newPassword2)) {
          this.loader({loader: true});
          const dataLogin = {
            username: this.passwordForm.user,
            password: this.passwordForm.currentPassword,
          };
          let isLogin = true;
          try {
            await this.login(dataLogin);
          } catch (error) {
            isLogin = false;
            this.errors = true;
            this.$notify.closeAll();
            this.$notify({
              title: 'Error',
              message: _this.$t('password.error'),
              type: 'error',
              position: 'top-right',
              duration: 3000,
            });
            // this.passwordChange = -1
          }
          this.loader({loader: false});
          if (isLogin) {
            console.log('Login: OK');
          } else {
            console.log('Login: KO');
          }
        } else {
          console.log('error submit!!');
          this.errors = true;
          return false;
        }
        return true;
      });
    },
  },
};
</script>
