<template>
  <div>
    <div class="flex justify-between">
      <div class="flex items-center">
        <!-- label of input field -->
        <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>
      <!-- hint on the right side of input field -->
      <span v-if="hint" class="text-sm text-gray-500">{{ hint }}</span>
    </div>
    <div
      :class="`relative h-9 ${
        label || hint ? 'mt-1' : ''
      } rounded-md ${inputWrapperClass}`"
    >
      <c-icon
        v-if="isSearchEnabled"
        name="search-outline-v2"
        type="outline"
        class="absolute top-2 left-2 h-5 w-5 flex-shrink-0 text-gray-400"
      ></c-icon>
      <input
        :readonly="readonly"
        :type="type"
        :value="inputValue"
        :id="id"
        @input="handleInput"
        @click="handleClick"
        @blur="
          $emit('blur', $event.target.value);
          $emit('blurEvent', $event);
        "
        @focus="$emit('focus', $event.target.value)"
        @keyup.enter="$emit('enter')"
        :class="[
          errorClasses,
          customClasses ? customClasses : 'rounded-md',
          isSearchEnabled ? 'pl-8' : '',
        ]"
        class="block w-full h-full flex-1 px-3 py-2 text-sm text-gray-900 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
        :placeholder="placeholder"
        :disabled="disabled"
        :min="minValue"
        :max="maxValue"
      />
      <!-- to render to show validation is failed -->
      <div
        v-if="!isValidate && !customIcon"
        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 bg-white"></c-icon>
      </div>
      <slot name="customIcon" v-if="customIcon"></slot>
    </div>
    <!-- validation error message -->
    <p v-if="!isValidate" class="mt-2 text-sm text-red-600">
      {{ errorMessage }}
    </p>
    <!-- description about the input field -->
    <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: "CInput",
  components: { CIcon },
  props: {
    // Label of input field
    label: {
      type: String,
    },
    // Read only of input field
    readonly: {
      type: Boolean,
    },
    // placeholder of input
    placeholder: {
      type: String,
    },
    // v-model of the field
    value: {
      type: String,
    },
    // hint on right side of input
    hint: { type: String },
    // description about the field
    helpText: {
      type: String,
    },
    // validation is passed or not
    isValidate: { type: Boolean },
    // validation error message
    errorMessage: {
      type: String,
    },
    // to disable the input field
    disabled: {
      type: Boolean,
    },
    // whether the input field is mandatory or not
    isRequired: {
      type: Boolean,
    },
    // type of input field
    type: {
      type: String,
      default: "text",
    },
    customClasses: {
      type: String,
    },
    customIcon: {
      type: Boolean,
      default: false,
    },
    minValue: {
      type: Number,
    },
    maxValue: {
      type: Number,
    },
    inputWrapperClass: {
      type: String,
      default: "",
    },
    id: {
      type: String,
    },
    isSearchEnabled: {
      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: {
    handleInput(event) {
      const value = event.target.value;
      this.inputValue = value;
      this.$emit("input", value);
      this.$emit("getCursorIndex", event.target.selectionStart);
    },
    handleClick(event) {
      this.$emit("getCursorIndex", event.target.selectionStart);
    },
  },
  data() {
    return {
      inputValue: this.value,
    };
  },
  watch: {
    value() {
      this.inputValue = this.value;
    },
  },
};
</script>
