<template>
  <div class="icon-btn-container">
    <tooltip v-if="showHelpText" :text="helpText" :position="helpTextPosition">
      <component
          :is="iconComponent"
          weight="regular"
          size="24"
          class="icon-btn"
          :class="iconClasses"
      />
    </tooltip>
    <component v-else
               :is="iconComponent"
               weight="regular"
               size="24"
               class="icon-btn"
               :class="iconClasses"
    />
  </div>

</template>

<script>
import Tooltip from "@/components/UI/Tooltip.vue";

export default {
  name: "IconButton",
  components: {Tooltip},
  props: {
    icon: {
      type: String,
      required: true,
    },
    helpText: {
      type: String,
      required: false,
      default: null,
    },
    helpTextPosition: {
      type: String,
      required: false,
      default: 'top',
      validator: (value) => ['top', 'bottom', 'left', 'right'].includes(value)
    },
    disabled: {
      type: Boolean,
      default: false
    },
    variant: {
      type: String,
      required: false,
      default: 'light-blue',
      validator: (value) => ['light-blue', 'blue', 'white'].includes(value)
    }
  },
  computed: {
    showHelpText() {
      return this.helpText != null && this.disabled === false;
    },
    iconClasses() {
      return [
        `icon-btn--${this.variant}`,
        {
          'icon-btn--disabled': this.disabled
        }
      ]
    },
    iconComponent() {
      const iconName = this.icon.charAt(0).toUpperCase() + this.icon.slice(1)
      return `Ph${iconName}`
    }
  }
}
</script>

<style scoped>
.icon-btn-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.icon-btn {
  cursor: pointer;
  transition: all 0.1s ease-in-out;
  color: #6B869C;
}

.icon-btn:hover:not(.icon-btn--disabled), .icon-btn:active:not(.icon-btn--disabled) {
  cursor: pointer;
  transform: scale(1.1);
}

.icon-btn--light-blue:hover:not(.icon-btn--disabled), .icon-btn--light-blue:active:not(.icon-btn--disabled) {
  color: #002F54;
}

.icon-btn--white:hover:not(.icon-btn--disabled), .icon-btn--white:active:not(.icon-btn--disabled) {
  color: #788590;
}

.icon-btn--light-blue {
  color: #6B869C;
}

.icon-btn--blue {
  color: #002F54;
}

.icon-btn--white {
  color: #FFFFFF;
}

.icon-btn--disabled {
  opacity: 0.3;
  cursor: default;
}

</style>