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


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

export default {
  name: 'TaoLargeIcon',
  props: {
    name: {
      type: String,
      default: 'default',
    },
    size: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      viewBox: '0 0 24 24',
    };
  },
  computed: {
    largeSize() {
      const DEFAULT_SIZE = 24;
      const SCALE_MULTIPLIER = 8;
      const DEFAULT_FONT_SIZE = 16;
      if (this.size >= 1 && this.size <= 9) {
        return (DEFAULT_SIZE + (SCALE_MULTIPLIER * this.size)) / DEFAULT_FONT_SIZE;
      }
      return 2;
    },
    getCorrectSize() {
      return this.changeWidthAndHeight(`${this.largeSize}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/large-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__large {
  width: 1em;
  height: 1em;
}
</style>
