<template>
  <div :class="['pkt-inputwrapper', disabledClass, inlineClass, errorClass]">
    <template v-if="useWrapper">
      <component
        :is="hasFieldset ? 'fieldset' : hasDropDown ? 'div' : 'label'"
        :for="!hasFieldset ? forId : undefined"
        class="pkt-inputwrapper__label"
        :class="{
          'pkt-inputwrapper__fieldset': hasFieldset,
          'pkt-inputwrapper__legend': hasFieldset,
        }"
        :aria-describedby="hasDropDown ? undefined : ariaDescribedby"
      >
        <component
          :class="{
            'pkt-inputwrapper__legend': hasFieldset,
          }"
          :is="hasFieldset ? 'legend' : hasDropDown ? 'h2' : 'span'"
          :id="`${forId}-label`"
          >{{ label }}<span v-if="tagText !== ''" :class="tagClass">{{ tagText }}</span></component
        >
        <PktHelptext
          :forId="forId"
          @toggleHelpText="toggleHelpText"
          :helptext="helptext"
          :helptextDropdownButton="helptextDropdownButton"
          :helptextDropdown="helptextDropdown"
        ></PktHelptext>
        <label v-if="!hasFieldset" :for="forId" class="pkt-sr-only" :aria-describedby="describedBy">{{ label }}</label>
        <slot />
      </component>
    </template>
    <template v-else>
      <label
        v-if="!hasFieldset"
        :for="forId"
        class="pkt-sr-only"
        :aria-describedby="describedBy"
        :id="`${forId}-label`"
        >{{ label }}</label
      >
      <slot />
    </template>
    <div v-if="counter" class="pkt-input__counter" aria-live="polite" aria-atomic="true">
      {{ counterCurrent || 0 }}<template v-if="counterMaxLength">/{{ counterMaxLength }}</template>
    </div>
    <div v-if="hasError && errorMessage">
      <PktAlert skin="error" aria-live="assertive" :id="`${forId}-error`" compact
        ><div class="pkt-contents" v-html="errorMessage"></div
      ></PktAlert>
    </div>
  </div>
</template>

<script>
import PktAlert from '../alert/Alert.vue'
import PktHelptext from '../helptext/Helptext.vue'

export default {
  name: 'pktInputwrapper',
  emits: ['toggleHelpText'],
  components: { PktAlert, PktHelptext },
  props: {
    forId: {
      type: String,
      required: true,
    },
    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,
    },
    counterCurrent: {
      type: Number,
      required: false,
    },
    counterMaxLength: {
      type: Number,
      required: false,
    },
    optionalTag: {
      type: Boolean,
      required: false,
      default: false,
    },
    optionalText: {
      type: String,
      default: 'Valgfritt',
    },
    requiredTag: {
      type: Boolean,
      required: false,
      default: false,
    },
    requiredText: {
      type: String,
      default: 'Må fylles ut',
    },
    hasError: {
      type: Boolean,
      required: false,
    },
    errorMessage: {
      type: String,
      required: false,
    },
    disabled: {
      type: Boolean,
      required: false,
      default: false,
    },
    inline: {
      type: Boolean,
      required: false,
      default: false,
    },
    ariaDescribedby: {
      type: String,
      required: false,
    },
    useWrapper: {
      type: Boolean,
      default: true,
    },
    hasFieldset: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      isHelpTextOpen: false,
    }
  },
  methods: {
    toggleHelpText() {
      this.isHelpTextOpen = !this.isHelpTextOpen
      this.$emit('toggleHelpText', this.isHelpTextOpen)
    },
  },
  computed: {
    tagText() {
      return this.optionalTag ? this.optionalText : this.requiredTag ? this.requiredText : ''
    },
    tagClass() {
      return this.optionalTag
        ? 'pkt-tag pkt-tag--small pkt-tag--thin-text pkt-tag--blue-light'
        : this.requiredTag
          ? 'pkt-tag pkt-tag--small pkt-tag--thin-text pkt-tag--beige'
          : ''
    },
    disabledClass() {
      return this.disabled ? 'pkt-inputwrapper--disabled' : ''
    },
    inlineClass() {
      return this.inline ? 'pkt-inputwrapper--inline' : ''
    },
    errorClass() {
      return this.hasError ? 'pkt-inputwrapper--error' : ''
    },
    hasDropDown() {
      return !!this.helptextDropdown && this.helptextDropdown !== ''
    },
    describedBy() {
      this.ariaDescribedby ? this.ariaDescribedby : this.helptext ? `${this.forId}-helptext` : undefined
    },
  },
}
</script>
