<template>
  <div :style="setMaxWidth">
    <div
      v-if="label || labelIcon"
      class="flex"
    >
      <div class="vc-input__label mb-2">
        <label class="vc-input__label-wrapper flex items-center">
          <span
            v-if="labelIcon"
            class="vc-input__label-wrapper--left-item"
          >
            <i
              :class="labelIcon"
              class="icon-lg vc-input__label-wrapper--left-item-icon text-icons"
            />
          </span>
          <span
            v-if="label"
            class="vc-input__label-wrapper-label"
          >
            {{ label }} <span
              v-if="required"
              class="vc-input__label-wrapper-label__required-icon"
            >*</span>
          </span>
          <VcPopover
            v-if="infoText || $slots['info-text']"
            :popover-width="infoTooltipWidth"
            arrow-position="bottom-center"
          >
            <template #reference>
              <span class="vc-input__label-info px-1 flex items-center">
                <i class="vc-icon-info icon-base" />
              </span>
            </template>
            <div
              class="label-info-text p-2 text-xs"
            >
              <slot name="info-text">
                {{ infoText }}
              </slot>
            </div>
          </VcPopover>
        </label>
      </div>
    </div>
    <div
      class="vc-input__container"
      :class="{ 'vc-input--clearable': clearable, 'vc-input--prefix-icon': prefixIcon }"
    >
      <input
        :id="id"
        v-model="input"
        class="vc-input"
        :type="type"
        :data-test="dataTestName"
        :name="name"
        :disabled="disabled"
        :placeholder="placeholder"
        :class="[
          inputClasses,
          {
            'vc-input--error': error,
            'disabled': disabled
          }
        ]"
        :maxlength="maxLength"
        :readonly="readonly"
        @blur="onBlur"
        @focus="onFocus"
      >
      <div
        v-if="prefixIcon"
        class="vc-input__prefix-icon"
      >
        <i
          :class="prefixClasses"
          :style="prefixStyle"
        />
      </div>
      <div
        v-if="clearable"
        class="vc-input__clearable"
      >
        <i
          class="vc-icon-close icon-xxs"
          @click="clear"
        />
      </div>
    </div>
    <div
      v-if="!dynamicErrorSpace || (dynamicErrorSpace && error)"
      class="vc-input__error-wrapper"
    >
      <span class="vc-input__error-wrapper--text">
        {{ error }}
      </span>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'
import inputMixin from '@/mixins/input.mixin'
import { VcInputType } from './VcInput.types'
import VcPopover from '@/components/VcPopover/VcPopover.vue'

export default defineComponent({
  name: 'VcInput',
  components: { VcPopover },
  mixins: [inputMixin],
  props: {
    modelValue: {
      type: [String, Number],
      default: ''
    },
    type: {
      type: String as PropType<VcInputType>,
      default: 'text'
    },
    placeholder: {
      type: String,
      default: undefined
    },
    maxLength: {
      type: Number,
      default: Infinity
    },
    clearable: {
      type: Boolean,
      default: false
    },
    readonly: {
      type: Boolean,
      default: false
    }
  },
  emits: ['update:modelValue', 'input', 'focus', 'blur'],
  data () {
    return {
      input: '' as string | number
    }
  },
  watch: {
    modelValue (val) {
      this.input = val
    },
    input (val): void {
      if (this.disabled) {
        return
      }
      this.$emit('input', val)
      this.$emit('update:modelValue', val)
    }
  },
  mounted () {
    this.input = this.modelValue
  },
  methods: {
    onBlur (): void {
      this.$emit('blur')
    },
    onFocus (): void {
      this.$emit('focus')
    },
    clear (): void {
      this.input = ''
    }
  }
})
</script>

<style lang="scss" scoped>
@import "VcInput";
</style>
