<template>
  <PktInputWrapper
    class="pkt-textinput"
    :class="$attrs.class"
    :forId="id"
    :label="label"
    :helptext="helptext"
    :helptextDropdown="helptextDropdown"
    :helptextDropdownButton="helptextDropdownButton"
    :counter="counter"
    :counterCurrent="counterCurrent"
    :counterMaxLength="counterMaxLength"
    :optionalTag="optionalTag"
    :optionalText="optionalText"
    :requiredTag="requiredTag"
    :requiredText="requiredText"
    :hasError="hasError"
    :errorMessage="errorMessage"
    :disabled="disabled"
    :inline="inline"
    :ariaDescribedby="ariaDescribedby"
    :useWrapper="useWrapper"
    @toggleHelpText="$emit('toggleHelpText')"
  >
    <div class="pkt-input__container">
      <div v-if="prefix" class="pkt-input-prefix">{{ prefix }}</div>
      <input
        v-bind="$attrs"
        @input="$emit('update:modelValue', $event.target.value)"
        :class="{
          'pkt-input': true,
          'pkt-input--fullwidth': fullwidth,
          'pkt-input--counter-error': counterMaxLength && counterCurrent > counterMaxLength,
        }"
        :type="type"
        :name="name || id"
        :id="id"
        :placeholder="placeholder"
        :autocomplete="autocomplete"
        :value="modelValue"
        :disabled="disabled"
        :aria-invalid="hasError"
        :aria-errormessage="hasError ? `${id}-error` : ''"
        :aria-labelledby="labelledBy"
        ref="input"
      />
      <p v-if="suffix" class="pkt-input-suffix">
        {{ suffix }}
        <PktIcon v-if="iconNameRight" class="pkt-input-suffix-icon" :name="iconNameRight" />
        <PktIcon v-else-if="shouldShowSearchIcon" class="pkt-input-suffix-icon" name="magnifying-glass-big" />
      </p>
      <PktIcon v-else-if="iconNameRight" class="pkt-input-icon" :name="iconNameRight" />
      <PktIcon v-else-if="shouldShowSearchIcon" class="pkt-input-icon" name="magnifying-glass-big" />
    </div>
  </PktInputWrapper>
</template>

<script>
import PktIcon from '../icon/Icon.vue'
import PktAlert from '../alert/Alert.vue'
import PktInputWrapper from '../inputwrapper/InputWrapper.vue'

export default {
  name: 'PktTextinput',
  components: { PktIcon, PktAlert, PktInputWrapper },
  inheritAttrs: false,
  emits: ['toggleHelpText', 'update:modelValue'],
  props: {
    label: {
      type: String,
      required: true,
      default: 'input',
    },
    helptext: {
      type: String,
      required: false,
    },
    helptextDropdown: {
      type: String,
      required: false,
    },
    helptextDropdownButton: {
      type: String,
      required: false,
    },
    counter: {
      type: Boolean,
      default: false,
    },
    counterMaxLength: {
      type: Number,
      required: false,
    },
    optionalTag: {
      type: Boolean,
      required: false,
      default: false,
    },
    optionalText: {
      type: String,
      required: false,
    },
    requiredTag: {
      type: Boolean,
      required: false,
      default: false,
    },
    requiredText: {
      type: String,
      required: false,
    },
    hasError: {
      type: Boolean,
      required: false,
    },
    errorMessage: {
      type: String,
      required: false,
    },
    name: {
      type: String,
      required: false,
    },
    id: {
      type: String,
      required: true,
    },
    placeholder: {
      type: String,
      required: false,
    },
    type: {
      type: String,
      required: false,
      default: 'text',
    },
    autocomplete: {
      type: String,
      required: false,
      default: 'off',
    },
    modelValue: {
      type: String,
      required: false,
    },
    suffix: {
      type: String,
      required: false,
    },
    prefix: {
      type: String,
      required: false,
    },
    iconNameRight: {
      type: String,
      required: false,
    },
    disabled: {
      type: Boolean,
      required: false,
      default: false,
    },
    inline: {
      type: Boolean,
      required: false,
      default: false,
    },
    fullwidth: {
      type: Boolean,
      default: false,
    },
    ariaLabelledby: {
      type: String,
      required: false,
    },
    ariaDescribedby: {
      type: String,
      required: false,
    },
    useWrapper: {
      type: Boolean,
      default: true,
    },
    omitSearchIcon: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    labelledBy() {
      this.ariaLabelledby || `${this.id}-label`
    },
    shouldShowSearchIcon() {
      return this.type === 'search' && !this.iconNameRight && !this.omitSearchIcon
    },
    counterCurrent() {
      return this.modelValue?.length
    },
  },
}
</script>
