<template>
  <svg
    class="bi-media-icon svg-icon"
    :class="{'iconInit':iconInit}"
    v-on="$listeners"
  >
    <use :xlink:href="returnName()" />
  </svg>
</template>

<script>
export default {
  name: 'BiIcon',
  props: {
    iconId: {
      type: String,
      default: ''
    },
    iconType: {
      type: String,
      default: 'MEDIA'
    },
    iconName: {
      type: String,
      default: ''
    },
    svgName: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      BI: this.$BI
    }
  },
  computed: {
    iconList() {
      return this.BI.iconList || {}
    },
    iconInit() {
      return this.BI.iconInit
    },
    upperIconType() {
      return this.iconType.toUpperCase()
    }
  },
  methods: {
    returnName() {
      if (!this.iconInit) return ''
      try {
        const iconGroup = this.iconList[this.upperIconType]
        if (!iconGroup) return ''

        const iconObj = iconGroup[this.iconId]
        if (!iconObj || !iconObj.icon) return ''

        return '#' + iconObj.icon
      } catch (error) {
        console.warn(`BiIcon: Failed to get icon - ${error.message}`)
        return ''
      }
    }
  }
}
</script>
<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
  overflow: hidden;
}

.svg-external-icon {
  background-color: currentColor;
  mask-size: cover !important;
  display: inline-block;
}
</style>