import Ember from 'ember';


const {
  get,
  computed
} = Ember;

export default Ember.Component.extend({
  tagName: 'svg',
  attributeBindings: [
    'width',
    'viewbox'
  ],

  width: null,
  bubbleCount: 1,
  bubbleSize: 40,
  barSize: 100,

  viewbox: computed('bubbleIndex', 'bubbleCount', function() {
    const count = get(this, 'bubbleCount');
    const bubbleSize = get(this, 'bubbleSize');
    const barSize = get(this, 'barSize');
    const totalSize = bubbleSize + barSize;

    return `0 0 ${count * totalSize} ${bubbleSize}`;
  })
});