<template>
  <div class="form-group mt-3">
    <label class="form-check-label" :for="id">
      <span v-if="required">* </span>{{ label }}
    </label>
    <span v-if="showMaxChars" class="float-end">{{ charLabel }}</span>
    <textarea
      class="form-control"
      :id="id"
      :rows="rows"
      :required="required"
      :value="modelValue"
      :maxlength="maxChars"
      :disabled="readonly"
      @input="updateModel"
    />
  </div>
</template>
<script>
/**
 * A bootstrap styled textarea input component with a label that shows how many characters were entered.
 */
export default {
  name: "FormGroupTextBox",
  props: {
    label: String,
    id: String,
    modelValue: String,
    rows: Number,
    required: Boolean,
    readonly: { type: Boolean, default: false },
    maxChars: { type: Number, default: -1 },
  },
  computed: {
    showMaxChars: function() {
      return this.maxChars >= 0;
    },
    charCount: function() {
      if (this.modelValue) return this.modelValue.trim().length;
      else return 0;
    },
    charLabel: function() {
      return this.charCount + "/" + this.maxChars;
    },
  },
  methods: {
    updateModel: function($event) {
      this.$emit("update:model-value", $event.target.value);
    },
  },
  setup() {},
};
</script>