<template lang="pug">
span.icon.wave-bars(:style="rootState")
  svg(version="1.1", id="Layer_1", xmlns="http://www.w3.org/2000/svg", xmlns:xlink="http://www.w3.org/1999/xlink", x="0px", y="0px", :width="inRems(getWidth)", :height="inRems(getHeight)", :viewBox="viewBox" style="enable-background:new 0 0 50 50;", xml:space="preserve")
    rect(v-for="(bar, index) in bars", :x="bar.x", :y="bar.y", :width="bar.width", :height="bar.height", :fill="color")
      animateTransform(attributeType="xml", attributeName="transform", type="translate", :values="transformValues", :begin="bar.begin", :dur="bar.duration", repeatCount="indefinite")
</template>
<script>
export default {
  name: 'loader-wave-bars',
  props: {
    barCount: {
      type: Number,
      required: false,
      default: 4,
      note: 'An Array of Objects of the DATA__ROW class.'
    },
    size: {
      required: false,
      default: 'small',
      note: 'Pass in size strings e.g. "small" or a number controlling the rem width'
    },
    pixelsPerRem: {
      required: false,
      default: 16,
      note: 'REM Size of the document, for scaling purposes.'
    },
    barWidth: {
      required: false,
      default: 5,
      note: 'Width of the bar before scaling'
    },
    barHeight: {
      required: false,
      default: 15,
      note: 'Height of the bar before scaling'
    },
    amplitude: {
      required: false,
      default: 10,
      note: 'Amplitude of the bar animation'
    },
    gap: {
      required: false,
      default: 10,
      note: 'Controls the size of spaces between bars'
    }
  },
  data: () => ({
    color: '#FF6700',
    bars: []
  }),
  created () {
    for (let i = 0; i < this.barCount; i++) {
      let bar = {
        x: i * this.getGap,
        y: 0,
        width: this.getBarWidth,
        height: this.getBarHeight,
        begin: `${i * 0.2}s`,
        duration: `0.6s`
      }
      this.bars.push(bar)
    }
  },
  computed: {
    rootState () {
      return {
        width: `${this.getWidth}rem`,
        height: `${this.getHeight}rem`
      }
    },
    transformValues () {
      return `0 0; 0 ${this.getAmplitude}; 0 0`
    },
    getBarWidth () {
      return this.barWidth * this.multiplier
    },
    getBarHeight () {
      return this.barHeight * this.multiplier
    },
    getGap () {
      return this.gap * this.multiplier
    },
    gapWidth () {
      return this.getGap - this.getBarWidth
    },
    getAmplitude () {
      return this.amplitude * this.multiplier
    },
    getHeight () {
      let height = (this.getBarHeight + this.getAmplitude) / this.pixelsPerRem
      return height.toFixed(2)
    },
    getWidth () {
      let pixelWidth = ((this.getBarWidth * this.barCount) + (this.gapWidth * (this.barCount - 1)))
      let width = pixelWidth / this.pixelsPerRem
      return width.toFixed(2)
    },
    viewBox () {
      return `0 0 ${this.getWidth * this.pixelsPerRem} ${this.getHeight * this.pixelsPerRem}`
    },
    multiplier () {
      if (this.size.length && !isNaN(Number(this.size))) {
        return Number(this.size).toFixed(2)
      }
      switch (this.size) {
        case 'extra-small':
          return 0.5
        case 'small':
          return 0.75
        case 'large':
          return 1.75
        case 'extra-large':
          return 2.5
        default:
          return 1.0
      }
    }
  },
  methods: {
    inRems (value) {
      return `${value}rem`
    }
  }
}
</script>

<style lang="stylus">
</style>
