<template>
  <div v-if="helptext || helptextDropdown">
    <pkt-helptext
      :forId="forId"
      :helptext="helptext"
      :helptextDropdown="helptextDropdown"
      :helptextDropdownButton="dropdownButton"
      @toggleHelpText="toggleHelpText"
    />
  </div>
</template>

<script>
import '@oslokommune/punkt-elements/dist/pkt-helptext'

export default {
  name: 'pktHelptext',
  emits: ['toggleHelpText'],
  props: {
    forId: {
      type: String,
      required: true,
    },
    helptext: {
      type: String,
      required: false,
    },
    helptextDropdown: {
      type: String,
      required: false,
    },
    helptextDropdownButton: {
      type: String,
      required: false,
    },
  },
  data() {
    return {
      isHelpTextOpen: false,
    }
  },
  methods: {
    toggleHelpText(e) {
      this.isHelpTextOpen = e.detail.isOpen
      this.$emit('toggleHelpText', this.isHelpTextOpen)
    },
  },
  computed: {
    dropdownButton() {
      return this.helptextDropdownButton || 'Les mer <span class="pkt-sr-only">om feltet</span>'
    },
  },
}
</script>
