<template>
  <widget-wrapper v-bind="$props" v-slot="{ inputEvents }">
    <q-input
      filled
      :label="noLabels ? undefined : fieldNode.label"
      :readonly="isReadonly"
      :placeholder="placeholderText"
      class="arm-text-area"
      ref="input"
      :value="currentValue"
      :error="hasError"
      :error-message="errorMessage"
      :rows="rows"
      type="textarea"
      @input="inputEvents.input"
      :clearable="value !== ''"
    />
  </widget-wrapper>
</template>

<script lang="ts">
import { Component, Prop } from 'vue-property-decorator';
import StringInput from './StringInput';
import { WidgetWrapper } from '@devsun/form-generator/dist';
import { QInput } from 'quasar';
import { Field } from '@devsun/eva-models';

@Component({
  components: {
    QInput,
    WidgetWrapper,
  },
})
export default class TextArea extends StringInput {
  @Prop() noLabels: boolean;
  @Prop({ default: 4 }) rows: number;

  private get placeholderText() {
    if (this.showPlaceholder) {
      // always show _the last_ applied object of this type (so dynamic help can overlay)
      const helpItems = this.fieldNode.help.filter(
        (h) => h.type === Field.HelpType.VALUE
      );
      return helpItems.length ? helpItems[helpItems.length - 1].text : ' ';
    }
    // space is returned on purpose, don't change this
    return ' ';
  }
}
</script>
