<template>
  <div>
    <div class="flex justify-between">
      <div class="flex items-center">
        <!-- label of phone field -->
        <label
          class="text-sm text-gray-900"
          :class="[isBlock ? ' font-medium' : '']"
          >{{ 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 w-full shadow-sm c-phone-container',
        {
          'c-phone-dropdown-list-right':
            countryDropdownListPosition === 'right',
        },
      ]"
    >
      <vue-tel-input
        v-bind="bindProps"
        :autoFormat="false"
        :id="id"
        v-model="value"
        :disabled="disabled"
        @input="handleBlur"
      >
        <template v-slot:arrow-icon>
          <c-icon
            name="chevron-down"
            type="solid"
            cursorType="cursor-pointer"
            class="h-5 w-5 text-gray-400 flex-shrink-0"
          ></c-icon>
        </template>
      </vue-tel-input>
    </div>
    <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 { VueTelInput } from "vue-tel-input";
import CIcon from "../CIcon/CIcon.vue";
export default {
  name: "CPhoneNumber",
  components: {
    VueTelInput,
    CIcon,
  },
  props: {
    // eslint-disable-next-line vue/require-prop-type-constructor
    id: {
      type: String,
    },
    phone: {
      type: String,
    },
    label: String,
    placeholder: {
      type: String,
      default: "Enter a phone number",
    },
    isValidate: {
      type: Boolean,
      default: true,
    },
    isRequired: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    errorMessage: {
      type: String,
    },
    // description about the field
    helpText: {
      type: String,
    },
    //label font-weight medium
    isBlock: {
      type: Boolean,
      default: false,
    },
    usePasteEventListener: {
      type: Boolean,
      default: false,
    },
    hint: {
      type: String,
    },
    countryDropdownListPosition: {
      type: String,
      default: "left",
      validator: (value) => ["left", "right"].includes(value),
    },
  },
  data() {
    return {
      value: this.phone,
      bindProps: {
        placeholder: this.placeholder,
        inputClasses: ["px-3", "py-2", "text-sm", "focus:ring-indigo-500"],
        inputId: "c-phone",
        wrapperClasses: "c-phone-wrapper",
        showDialCode: false,
        enabledCountryCode: false,
        mode: "international",
        validCharactersOnly: true,
      },
    };
  },
  methods: {
    handleBlur() {
      this.isFocused = false;
      this.$emit("blur", this.value);
    },
    handlePaste(event) {
      // Check if the paste event is happening within the vue-tel-input component
      const telInput = this.$el.querySelector(".vue-tel-input");
      if (!telInput || !telInput.contains(event.target)) {
        return;
      }

      event.preventDefault();
      const pastedText = (event.clipboardData || window.clipboardData).getData(
        "text"
      );
      const cleanedData = pastedText.replace(/[^\d+]/g, "");
      this.value = cleanedData;
      this.$emit("onChange", cleanedData);
    },
  },
  watch: {
    phone: {
      handler(newValue) {
        this.value = newValue;
      },
      deep: true,
    },
    value(newVal) {
      this.$emit("onChange", newVal);
    },
  },
  mounted() {
    if (this.usePasteEventListener) {
      this.$el.addEventListener("paste", this.handlePaste);
    }
  },
  beforeDestroy() {
    if (this.usePasteEventListener) {
      this.$el.removeEventListener("paste", this.handlePaste);
    }
  },
};
</script>
<style>
.vue-tel-input {
  border: 1px solid #d1d5db !important;
  @apply h-9 text-gray-900 !shadow-none;
}

.vue-tel-input.disabled {
  @apply !text-gray-500 !bg-gray-50 !border-gray-200 shadow-none opacity-100 cursor-not-allowed pointer-events-auto;
}

.vue-tel-input.disabled .vti__dropdown {
  @apply cursor-not-allowed hover:bg-transparent;
}

#c-phone {
  border-top-right-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
}

.c-phone-wrapper {
  border-radius: 0.375rem !important;
}

.vti__dropdown {
  @apply px-3 py-2 border-r border-gray-300;
}

.vti__dropdown:hover {
  @apply rounded-l-md;
}

.vti__selection {
  @apply gap-1;
}

.vti__flag {
  @apply m-0 flex-shrink-0;
}

.c-phone-dropdown-list-right .vti__dropdown-list {
  left: auto;
  right: -1px;
}
</style>
