<template>
  <div class="complete-profile-register">
    <GlobalForm
      http-verb="post"
      form-id="full-form_register"
      redirectTo="/logout"
      :endpoint="`registration/complete/${getUserInfos.uuid}`"
      :steps="['request', 'redirect']"
      :success-log="$_tr('success')"
    >
      <template #fields>
        <component
          :is="`input-${field.type}`"
          v-for="field in formFields"
          v-bind="field"
          :key="field.model"
          :model-name="field.model"
          :label="$_tr(`fields.${field.translation}`)"
          form-id="full-form_register"
        />
      </template>

      <template #submitForm>
        <input
          type="submit"
          class="btn"
          :value="$_tr('common.actions.validate')"
        />
      </template>
    </GlobalForm>
  </div>
</template>

<script>
import { http } from '@inside-library/helpers/Http'

import GlobalForm from '@inside-forms/displays/GlobalForm'

export default {
  name: 'CompleteProfileRegister',
  $_i18nRootPath: 'customs.COMPLETE_PROFILE_REGISTER',
  components: {
    GlobalForm
  },
  data() {
    return {
      functionsData: [],
      sectorsData: []
    }
  },
  computed: {
    formFields() {
      return [
        {
          type: 'text',
          model: 'firstname',
          translation: 'firstname',
          rules: ['required']
        },
        {
          type: 'text',
          model: 'lastname',
          translation: 'lastname',
          rules: ['required']
        },
        {
          type: 'day',
          model: 'birthday',
          translation: 'birthday',
          rules: ['required'],
          toDate: true
        },
        {
          type: 'selectbox',
          model: 'functions',
          translation: 'function',
          rules: ['required'],
          inputData: this.functionsData,
          objectValueKey: 'uuid',
          objectLabelKey: 'title'
        },
        {
          type: 'text',
          model: 'company',
          translation: 'company',
          rules: ['required']
        }
      ]
    }
  },
  beforeMount() {
    this.fetchFunctions()
  },
  methods: {
    /*
     * Allow to fetch content
     * @param {String} content
     * @param {Object} params
     * @return {Array}
     */
    async fetchData(content) {
      try {
        const { data } = await http.get(`content/${content}`, {
          filter: { sort: 'title:asc' },
          fields: ['uuid', 'title']
        })
        return data
      } catch (err) {
        throw new Error(err)
      }
    },
    async fetchFunctions() {
      this.functionsData = await this.fetchData('functions')
    }
  }
}
</script>
