<template>
  <section class="reset-password-container">
    <h4>Please choose a new password for your&nbsp;account.</h4>
    <ElForm
      ref="resetPasswordForm"
      :model="resetPasswordForm"
      :rules="rules"
      label-position="top"
      class="reset-password"
      data-test="reset password"
      @submit.native.prevent="submitResetPassword"
    >
      <ElFormItem
        for="password-input"
        prop="password"
        class="password-container"
        size="medium"
      >
        <TfPasswordField
          v-model="resetPasswordForm.password"
          label="New password"
          :is-valid-password.sync="isValid"
          data-test="password reset"
        />
      </ElFormItem>
      <div class="btn-group">
        <slot name="ctaSubmit">
          <AppButton
            :is-disabled="!resetPasswordForm.password || !isValid || submitting"
            type="primary"
            native-type="submit"
            text="Update Password"
            no-branding
          />
        </slot>
      </div>
    </ElForm>
  </section>
</template>

<script>
  export default {
    name: 'AppResetPasswordForm',
    props: {
      accountService: {
        type: Object,
        default: () => ({}),
      },
      /* Adding the following two props for completeness' sake (we are
         passing it as a :sync prop on the component when it is used);
         the value is not consumed by the component, but this way the
         fact that it IS to be passed as a :sync prop if the
         accountService isn't passed is documented. */
      password: {
        type: String,
        default: '',
      },
      isValidPassword: {
        type: Boolean,
        default: false,
      },
    },
    data: () => ({
      resetPasswordForm: {
        password: '',
        showPassword: false,
      },
      rules: {
        password: [
          { required: true, message: 'Please choose a password.', trigger: 'none' },
          { min: 6, message: 'Your password must be at least 6 characters.', trigger: 'none' },
        ],
      },
      passwordType: 'password',
      submitting: false,
      isValid: false,
    }),
    watch: {
      /**
       * Watch the "password" field to emit synced password values.
       *
       * @param {string} password
       */
      'resetPasswordForm.password': function (password) {
        this.$emit('update:password', password);
      },
      /**
       * Watch the "isValid" value to emit validation state, so that it can be used by a slotted button.
       *
       * @param {boolean} isValid
       */
      isValid(isValid) {
        this.$emit('update:isValidPassword', isValid);
      },
    },
    mounted() {
      window.setTimeout(() => {
        this.resetPasswordForm.password = '';
      }, 100);
    },
    methods: {
      /**
       * Validate the resetPasswordForm
       * Then call the accountService/changePassword method and emit an event if successful
       */
      submitResetPassword() {
        this.$refs.resetPasswordForm.validate((valid) => {
          if (!this.accountService.changePassword) {
            return valid;
          }

          this.submitting = true;

          if (valid) {
            const data = {
              password: this.resetPasswordForm.password,
            };
            this.accountService.changePassword(data).then(() => {
              this.submitting = false;
              this.$emit('passwordUpdated');
            });
          } else {
            this.submitting = false;
          }

          return valid;
        });
      },
    },
  };
</script>

<style lang="scss" scoped>
  @import 'src/assets/styles/mixins';

  .el-form-item {
    margin-bottom: 5px;
  }

  .btn-group {
    display: flex;
    margin-top: 25px;
  }

  .el-input {
    max-width: 300px;
  }

  h4 {
    margin-bottom: 20px;
    font-weight: 400;
    font-size: 16px;
  }

  p {
    margin-bottom: 5px;
  }
</style>
