<template>
  <global-form
    form-id="users-modal-credits-form"
    class="users-modal-credits-frl-container"
    http-verb="post"
    endpoint="catering/credits"
    :use-submit-slot="canEdit"
    :show-logs="false"
    @onRequestSuccess="handleRequestSuccess"
    @onRequestError="() => handleRequestSubmission('error')"
  >
    <template #fields>
      <input-number
        form-id="users-modal-credits-form"
        model-name="credits"
        :label="$_tr('labels.creditsToAdd')"
        :step="0.01"
        :rules="['required']"
      />

      <input-hidden
        form-id="users-modal-credits-form"
        model-name="uuid"
        :default-value="uuid"
        :rules="['required']"
      />
    </template>
  </global-form>
</template>

<script>
export default {
  name: 'UsersModalCreditsForm',
  $_i18nRootPath: 'customs.USERS.MODAL.INFOS',
  props: {
    canEdit: {
      type: Boolean,
      default: null,
      required: true
    },
    uuid: {
      type: String,
      required: true
    }
  },
  methods: {
    handleRequestSuccess({ total }) {
      this.$emit('onAmountCredited', total)
      this.handleRequestSubmission('success')
    },
    handleRequestSubmission(success) {
      this.$_triggerToast({
        type: success,
        text: this.$_tr(`logs.${success}`)
      })
    }
  }
}
</script>

<style lang="scss">
.users-modal-credits-frl-container {
  max-width: 200px;
}
</style>
