<template>
  <button
    v-bind="$attrs"
    :type="type"
    :class="classes"
    @click="$emit('onClick')"
    @keyup.enter="$emit('onClick')"
    :disabled="disabled"
  >
    <PktIcon
      v-if="isLoading === true"
      class="pkt-btn__icon pkt-btn__spinner"
      name="spinner-blue"
      path="https://punkt-cdn.oslo.kommune.no/latest/animations/"
    ></PktIcon>
    <PktIcon v-if="variant !== 'label-only'" class="pkt-btn__icon" :name="iconName"></PktIcon>
    <span class="pkt-btn__text">
      <slot>{{ text }}</slot>
    </span>
    <PktIcon v-if="variant === 'icons-right-and-left'" class="pkt-btn__icon" :name="secondIconName"></PktIcon>
  </button>
</template>
<script>
import PktIcon from '../icon/Icon.vue'
export default {
  name: 'PktButton',
  components: {
    PktIcon,
  },
  props: {
    disabled: {
      type: Boolean,
      required: false,
      default: false,
    },
    iconName: {
      type: String,
      required: false,
      default: 'user',
    },
    secondIconName: {
      type: String,
      required: false,
      default: 'user',
    },
    size: {
      type: String,
      default: 'medium',
      validator: (value) => ['small', 'medium', 'large'].includes(value),
    },
    skin: {
      type: String,
      default: 'primary',
      validator: (value) => ['primary', 'secondary', 'tertiary'].includes(value),
    },
    color: {
      type: String,
      validator: (value) =>
        [
          'blue',
          'blue-outline',
          'green',
          'green-outline',
          'green-dark',
          'green-dark-outline',
          'beige-light',
          'beige-dark-outline',
          'yellow',
          'yellow-outline',
          'red',
          'red-outline',
        ].includes(value),
    },
    // Text will get overwritten by "slot" if we have any DOM children in the button element
    text: {
      type: String,
      required: false,
      default: 'Trykk her',
    },
    variant: {
      type: String,
      default: 'label-only',
      validator: (value) =>
        ['label-only', 'icon-left', 'icon-right', 'icon-only', 'icons-right-and-left'].includes(value),
    },
    state: {
      type: String,
      required: false,
      validator: (value) => ['normal', 'focus', 'hover', 'active'].includes(value),
    },
    type: {
      type: String,
      default: 'button',
      validator: (value) => ['button', 'submit', 'reset'].includes(value),
    },
    isLoading: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    classes() {
      return [
        'pkt-btn',
        this.sizeClass,
        this.skinClass,
        this.variantClass,
        this.colorClass,
        this.isLoadingClass,
        this.stateClass,
      ]
    },
    sizeClass() {
      return this.size !== 'medium' ? `pkt-btn--${this.size}` : ''
    },
    skinClass() {
      return this.skin !== 'primary' ? `pkt-btn--${this.skin}` : ''
    },
    colorClass() {
      return this.color ? `pkt-btn--${this.color}` : ''
    },
    stateClass() {
      return this.state ? `pkt-btn--${this.state}` : ''
    },
    variantClass() {
      return this.variant !== 'label-only' ? `pkt-btn--${this.variant}` : ''
    },
    isLoadingClass() {
      return this.isLoading === true ? 'pkt-btn--active' : ''
    },
  },
}
</script>
