<template>
  <div>
    <div class="flex justify-between">
      <div class="flex items-center">
        <!-- label of input field -->
        <label v-if="label" class="block text-sm font-medium text-gray-900">
          {{ label }}
        </label>
        <!-- asterisk sign to render if field is required -->
        <p v-if="isRequired" class="ml-1 text-red-600">*</p>
      </div>

      <span v-if="hint" class="text-sm text-gray-500">{{ hint }}</span>
    </div>

    <div class="mt-1">
      <textarea
        :value="textareaValue"
        @input="$emit('input', $event.target.value)"
        @blur="$emit('blur', $event.target.value)"
        @keyup="updateCursorPosition"
        @click="updateCursorPosition"
        :placeholder="placeholder"
        :id="id"
        :rows="rows"
        :class="[
          errorClasses,
          extraClasses,
          disableResize ? 'resize-none' : '',
        ]"
        :disabled="disabled"
        class="block w-full rounded-md text-gray-900 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 disabled:opacity-50 sm:text-sm"
      ></textarea>
      <!-- <div
        v-if="!isValidate"
        class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-red-600"
      >
        <c-icon name="exclamation-circle" type="solid" class="h-5 w-5"></c-icon>
      </div> -->
    </div>
    <p v-if="!isValidate" class="mt-2 text-sm text-red-600">
      {{ errorMessage }}
    </p>
    <p v-if="helpText && isValidate == true" class="mt-2 text-sm text-gray-500">
      {{ helpText }}
    </p>
  </div>
</template>
<script>
// import CIcon from "../CIcon/CIcon.vue";
export default {
  name: "CTextarea",
  // components: { CIcon },
  props: {
    id: {
      type: String,
    },
    label: {
      type: String,
    },
    extraClasses: {
      type: String,
    },
    placeholder: {
      type: String,
    },
    value: {
      type: String,
    },
    rows: { type: String, default: "3" },
    helpText: {
      type: String,
    },
    hint: { type: String },
    isValidate: { type: Boolean },
    errorMessage: {
      type: String,
    },
    // whether the textarea field is mandatory or not
    isRequired: {
      type: Boolean,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    //disable the resize
    disableResize: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    errorClasses() {
      return {
        "border-red-300 text-red-900 placeholder-red-300 focus:ring-red-500 focus:border-red-500":
          this.isValidate == false,
        "border-gray-300": this.isValidate == true,
      };
    },
  },
  methods: {
    updateCursorPosition(event) {
      this.$emit("handleCursorIndex", event.target.selectionStart);
    },
  },
  data() {
    return {
      textareaValue: this.value,
    };
  },
  watch: {
    value() {
      this.textareaValue = this.value;
    },
  },
};
</script>
