<template>
  <svg
    :style="getCorrectSize"
    :viewBox="viewBox"
    :class="{ 'icon__circle': styled }"
    @click="event => $emit('click', event)"
    class="tao__icon icon__mini"
    fill="currentColor"
    style="vertial-align: middle" />
</template>


<script>
// @flow
import { createSvgLegacy, setSvgFill } from 'utils/svg.utils';

export default {
  name: 'TaoMiniIcon',
  props: {
    name: {
      type: String,
      default: 'default',
    },
    size: {
      type: Number,
      default: 1,
    },
    styled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      viewBox: '0 0 24 24',
    };
  },
  computed: {
    miniSize() {
      if (this.size >= 1 && this.size <= 3) {
        return (this.size / 2) + 1;
      }
      return 1.5;
    },
    getCorrectSize() {
      return this.changeWidthAndHeight(`${this.miniSize}rem`);
    },
  },
  watch: {
    name() {
      this.createSvgElement();
    },
  },
  mounted() {
    this.createSvgElement();
  },
  methods: {
    changeWidthAndHeight: (size: number) => ({
      width: size,
      height: size,
    }),
    createSvgElement() {
      const output = document.createElement('div');
      // eslint-disable-next-line
      const source = require(`@/assets/mini-icons/${this.name}.svg`);
      output.innerHTML = source;
      const svg = output.querySelector('svg');
      if (!svg) { return; }

      if (svg.innerHTML === undefined) {
        createSvgLegacy(this.$el, source);
      } else {
        this.$el.innerHTML = svg.innerHTML;
      }

      setSvgFill(this.$el);
      this.viewBox = svg.getAttribute('viewBox');
    },
  },
};
</script>

<style lang="scss">
.icon__mini {
  width: 1em;
  height: 1em;
}
</style>
