<template>
  <div class="flex-row-container flex-all-center full-height">
    <form @submit.prevent="updateFlid">
      <div class="input-container">
        <div class="form-group">
          <div class="input-group-container">
            <div class="form-floating">
              <input
                class="input-email"
                id="inputCode"
                type="text"
                :placeholder="'set your Freeleaps user id'"
                v-model="flid"
              />
              <label for="inputCode">{{ $t('Your Freeleaps User ID') }}</label>
            </div>
            <button type="submit" class="btn-start">{{ $t('SUBMIT') }}</button>
          </div>
        </div>
        <p class="errorInput" v-if="message != null">{{ message }}</p>
      </div>
    </form>
  </div>
</template>

<script>
import { UserAuthApi } from '@/utils/index'
import { signinActionEnum } from '@/types/index'
export default {
  name: 'NewUserSetFlid',
  props: {
    suggested_flid: {
      required: true,
      type: String
    }
  },

  data() {
    return {
      flid: null,
      message: null
    }
  },

  components: {},

  created() {},
  mounted() {
    this.flid = this.suggested_flid
  },
  methods: {
    updateFlid() {
      this.message = null
      if (this.flid === null || this.flid.length < 1) {
        this.message = this.$t('Please type in your Freeleaps user ID')
        return
      }

      if (this.message != null) return

      UserAuthApi.updateFlid(this.flid)
        .then((response) => {
          switch (response.data.signin_result) {
            case signinActionEnum.REVIEW_AND_REVISE_FLID:
              this.flid = response.data.flid
              break
            case signinActionEnum.NEW_USER_SET_PASSWORD:
              this.mnx_navToNewUserSetPassword()
              break
            default:
              this.mnx_navAfterSignedin()
              break
          }
        })
        .catch((error) => {
          this.mnx_backendErrorHandler(error)
        })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss"></style>
