<template>
  <div>
    <div v-if="label" class="mb-1 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>
      <span v-if="hint" class="text-sm text-gray-500">{{ hint }}</span>
    </div>
    <div
      v-if="!inlineAddon && addonType == 'leading'"
      class="relative h-9 flex rounded-md"
    >
      <span
        :class="[
          !isValidate
          ? 'border-red-300 bg-red-50 text-red-600'
          : 'border-gray-300',
          disabled ? 'custom-disabled-state' : '',
        ]"
        v-if="addon"
        class="inline-flex items-center rounded-l-md border border-r-0 bg-gray-50 px-3 py-2 text-gray-500 sm:text-sm"
      >
        {{ addon }}
      </span>
      <input
        :type="inputType"
        :value="inputValue"
        @input="$emit('input', $event.target.value)"
        @blur="$emit('blur', $event.target.value)"
        :class="{
          ...errorClasses,
          'rounded-l-md': !addon,
          'border-red-300': !isValidate,
        }"
        class="block w-full flex-1 rounded-r-md px-3 py-2 text-gray-900 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 disabled:custom-disabled-state sm:text-sm"
        :id="id"
        :placeholder="placeholder"
        :disabled="disabled"
      />
      <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>
    <div
      v-if="!inlineAddon && addonType == 'trailing'"
      class="relative h-9 flex rounded-md"
    >
      <input
        :type="inputType"
        :value="inputValue"
        @input="$emit('input', $event.target.value)"
        @focus="isFocused = true"
        @blur="handleBlur"
        :id="id"
        :class="{
          ...errorClasses,
          'border-red-300': !isValidate,
        }"
        :style="`padding-right:${measuredRightPadding}px`"
        class="block w-full flex-1 rounded-md px-3 py-2 text-gray-900 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 disabled:custom-disabled-state sm:text-sm"
        :placeholder="placeholder"
        :disabled="disabled"
      />
      <div
        class="absolute inset-y-0 right-0 flex items-center space-x-2"
        ref="addonContainer"
      >
        <div v-if="!isValidate" class="flex items-center text-red-600">
          <c-icon
            name="exclamation-circle"
            type="solid"
            class="h-5 w-5"
          ></c-icon>
        </div>
        <span
          class="flex h-full items-center rounded-r-md border bg-gray-50 px-3 py-2 text-gray-500 sm:text-sm"
          :class="[
            !isValidate
            ? 'border-red-300 bg-red-50 text-red-600'
            : isFocused
            ? 'border-indigo-500'
            : 'border-gray-300',
            disabled ? 'custom-disabled-state' : '',
          ]"
        >
          {{ addon }}
        </span>
      </div>
    </div>
    <div
      v-if="inlineAddon && addonType == 'trailing'"
      class="relative h-9 flex rounded-md"
    >
      <input
        :type="inputType"
        :value="inputValue"
        @input="$emit('input', $event.target.value)"
        @focus="isFocused = true"
        @blur="handleBlur"
        :id="id"
        :class="{
          ...errorClasses,
          'rounded-l-md': !addon,
          'border-red-300': !isValidate,
        }"
        :style="`padding-right:${measuredRightPadding}px`"
        class="block w-full flex-1 rounded-md px-3 py-2 text-gray-900 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 disabled:custom-disabled-state sm:text-sm"
        :placeholder="placeholder"
        :disabled="disabled"
      />
      <div
        class="absolute inset-y-0 right-3 flex items-center space-x-2"
        ref="addonContainer"
      >
        <div v-if="!isValidate" class="flex items-center text-red-600">
          <c-icon
            name="exclamation-circle"
            type="solid"
            class="h-5 w-5"
          ></c-icon>
        </div>
        <span
          class="text-gray-500 sm:text-sm"
          :class="[
            !isValidate ? 'text-red-600' : 'border-gray-300',
            disabled ? 'custom-disabled-state' : '',
          ]"
        >
          {{ addon }}
        </span>
      </div>
    </div>
    <div
      v-if="inlineAddon && addonType == 'leading'"
      class="relative h-9 flex rounded-md"
    >
      <div
        class="pointer-events-none absolute inset-y-0 left-0 flex items-center"
      >
        <span
          class="px-3 py-2 text-gray-500 sm:text-sm"
          :class="[
            !isValidate ? 'text-red-600' : 'border-gray-300',
            disabled ? 'custom-disabled-state' : '',
          ]"
          >{{ addon }}</span
        >
      </div>
      <input
        :type="inputType"
        :value="inputValue"
        @input="$emit('input', $event.target.value)"
        @blur="$emit('blur', $event.target.value)"
        :class="{ ...errorClasses, 'border-red-300': !isValidate }"
        :style="`padding-left:${leftPaddingStyle}`"
        class="block w-full rounded-md text-gray-900 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 disabled:custom-disabled-state sm:text-sm"
        :id="id"
        :placeholder="placeholder"
        :disabled="disabled"
      />
      <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 && errorMessage"
      class="mt-2 text-left text-sm text-red-600"
    >
      {{ errorMessage }}
    </p>
    <p
      v-if="helpText && isValidate == true"
      :class="`mt-2 text-left text-sm ${helpTextColorStyles}`"
    >
      {{ helpText }}
    </p>
  </div>
</template>

<script>
import CIcon from "../CIcon/CIcon.vue";
export default {
  name: "CInputAddon",
  components: { CIcon },
  props: {
    id: {
      type: String,
    },
    label: {
      type: String,
    },
    placeholder: {
      type: String,
    },
    value: [String, Number],
    hint: { type: String },
    helpText: {
      type: String,
    },
    addon: { type: String },
    helpTextColor: {
      type: String,
      default: "gray",
    },
    inlineAddon: { type: Boolean },
    addonType: {
      type: String,
    },
    isValidate: { type: Boolean },
    errorMessage: {
      type: String,
    },
    disabled: {
      type: Boolean,
    },
    // whether the input field is mandatory or not
    isRequired: {
      type: Boolean,
    },
    inputType: {
      type: String,
      default: "text",
    },
  },
  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,
      };
    },
    leftPaddingStyle() {
      var leftPadding;
      if (this.addon.length <= 2) {
        leftPadding = "2rem";
      } else if (this.addon.length >= 3) {
        leftPadding = "3.5rem";
      }
      return leftPadding;
    },
    helpTextColorStyles() {
      switch (this.helpTextColor) {
        case "green":
          return "text-green-500";
        case "red":
          return "text-red-500";
        default:
          return "text-gray-500";
      }
    },
  },
  data() {
    return {
      inputValue: this.value,
      measuredRightPadding: 0,
      isFocused: false,
    };
  },
  methods: {
    updateRightPadding() {
      this.$nextTick(() => {
        if (this.$refs.addonContainer) {
          this.measuredRightPadding =
            this.$refs.addonContainer.offsetWidth + 16; // add a little extra space
        }
      });
    },
    handleBlur(event) {
      this.isFocused = false;
      this.$emit("blur", event.target.value);
    },
  },
  mounted() {
    this.updateRightPadding();
  },
  updated() {
    this.updateRightPadding();
  },
  watch: {
    value() {
      this.inputValue = this.value;
    },
  },
};
</script>
