import { inject as service } from '@ember/service';
import Component from '@ember/component';
import { computed } from '@ember/object';
import $ from 'jquery';

const UpfIconComponent = Component.extend({
  assetMap: service('asset-map'),

  icon: computed('params.[]', function() {
    return this.get('params')[0];
  }),

  color: computed('params.[]', function() {
    return this.get('params')[1];
  }),

  thickness: computed('params.[]', function() {
    return this.get('params')[2];
  }),

  willInsertElement() {
    $.get(
      this.get('assetMap').resolve(`assets/upf-icons/${this.get('icon')}.svg`),
      (data) => {
        let element = this.$()[0];

        if (this.get('color')) {
          data.children[0].classList += ` upf-icon--${this.get('color')}`;
        }

        if (this.get('thickness')) {
          data.children[0].classList +=
            ` upf-icon--stroke-${this.get('thickness')}`;
        }

        element.innerHTML = new XMLSerializer().serializeToString(data);
      }
    );
  }
});

UpfIconComponent.reopenClass({
  positionalParams: 'params'
});

export default UpfIconComponent;

@@ -233,16 +233,41 @@
 map'),%0A%0A
+  assetsRoot: 'assets',%0A%0A
   icon: 
@@ -587,22 +587,34 @@
 esolve(%60
+$%7Bthis.
 assets
+Root%7D
 /upf-ico

allow assets root path to be set by the callee