<template>
  <n-input
    :rules="rules"
    :value="value"
    :label="label"
    :filled="filled"
    :disabled="disabled"
    :required="required"
  >
    <template #default="{ hasError }">
      <div class="n-input-slot n-radius-md n-py-3 n-px-4">
        <slot name="prepend-icon">
          <div
            v-if="prependIcon"
            :class="[
              prependIcon,
              'n-icon n-input-icon-wrapper',
              { 'n-color-danger': hasError },
            ]"
          />
        </slot>

        <textarea
          v-bind="$attrs"
          :value="value"
          :disabled="disabled"
          class="pkg-n-text-area"
          :placeholder="placeholder"
          v-on="{
            ...$listeners,
            input: updateParent,
          }"
        />

        <slot name="append-icon">
          <div
            v-if="appendIcon"
            :class="[
              appendIcon,
              'n-icon n-input-icon-wrapper',
              { 'n-color-danger': hasError },
            ]"
          />
        </slot>
      </div>
    </template>

    <template #helperText>
      <slot name="counter">
        <div v-if="counter" class="n-input-counter n-text-end">
          {{ counterValue }}
        </div>
      </slot>

      <div
        v-if="helperText"
        class="n-input-helper-text n-text-body3 n-font-normal"
      >
        {{ helperText }}
      </div>
    </template>
  </n-input>
</template>

<script>
import NInput from "../NInput/n-input.vue";

export default {
  name: "NTextarea",
  components: {
    NInput,
  },
  inheritAttrs: false,
  props: {
    rules: {
      type: Array,
      default: () => [],
    },
    value: {
      type: String,
      default: "",
    },
    label: {
      type: String,
      default: "",
    },
    prependIcon: {
      type: String,
      default: "",
    },
    appendIcon: {
      type: String,
      default: "",
    },
    placeholder: {
      type: String,
      default: "",
    },
    helperText: {
      type: String,
      default: "",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    filled: {
      type: Boolean,
      default: false,
    },
    required: {
      type: Boolean,
      default: false,
    },
    counter: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    counterValue() {
      return this.value.length;
    },
  },
  methods: {
    updateParent(e) {
      this.$emit("input", e.target.value);
    },
  },
};
</script>

<style scoped>
@import url("./n-textarea.css");
</style>
