import { A } from '@ember/array';
import { dasherize, camelize, htmlSafe } from '@ember/string';
import { defineProperty, computed } from '@ember/object';
import Mixin from '@ember/object/mixin';

// Thanks to ember-computed-style
// Lifted from React
const isUnitlessNumber = {
  animationIterationCount: true,
  boxFlex: true,
  boxFlexGroup: true,
  boxOrdinalGroup: true,
  columnCount: true,
  flex: true,
  flexGrow: true,
  flexPositive: true,
  flexShrink: true,
  flexNegative: true,
  flexOrder: true,
  gridRow: true,
  gridColumn: true,
  fontWeight: true,
  lineClamp: true,
  lineHeight: true,
  opacity: true,
  order: true,
  orphans: true,
  tabSize: true,
  widows: true,
  zIndex: true,
  zoom: true,

  // SVG-related properties
  fillOpacity: true,
  stopOpacity: true,
  strokeDashoffset: true,
  strokeOpacity: true,
  strokeWidth: true
};

export default Mixin.create({
  concatenatedProperties: ['styleBindings'],

  init() {
    this._super(...arguments);

    if(this.styleBindings || this.styles) {
      let styleKeys = ['styles'];
      if(this.styleBindings) {
        this.styleBindings = A(this.styleBindings.slice());
        this.styleBindings.forEach(function(binding) {
          styleKeys.push(binding.split(':')[0]);
        });
      }
      if(this.attributeBindings) {
        const attrb = this.attributeBindings.slice(0);
        attrb.push('style');
        this.attributeBindings = attrb;
      } else {
        this.attributeBindings = ['style'];
      }

      defineProperty(this, 'style', computed(...styleKeys, this._buildStyles));
    }
  },

  _buildStyle(property, value) {
    if (typeof value === 'undefined' || value === null ) {
      return null;
    } else {
      return this._fixStyles(property, value).join(':');
    }
  },

  _buildStyles() {
    let styles = [];
    if(this.styleBindings) {
      this.styleBindings.forEach((binding) => {
        let [key, property] = binding.split(':');
        if(!property) { property = key; }
        let style = this._buildStyle(property, this.get(key));
        if (style !== null ) styles.push(style);
      });
    }
    if(this.styles) {
      Object.keys(this.styles).forEach((key) => {
        let style = this._buildStyle(key, this.get('styles.'+key));
        if (style !== null) styles.push(style);
      });
    }
    // console.log('styles', styles);
    return htmlSafe(styles.join(';'));
  },

  _fixStyles(property, value) {
    let isNumber = !isNaN(value) && isFinite(value);
    if(isNumber && !isUnitlessNumber[camelize(property)]) {
      value = value + 'px';
    }
    return [dasherize(property), value];
  }
});

@@ -1994,36 +1994,36 @@
 ; %7D%0A        
-let 
 style
- = 
+s.push(
 this._buildS
@@ -2055,56 +2055,8 @@
 ey))
-;%0A        if (style !== null ) styles.push(style
 );%0A 
@@ -2154,20 +2154,20 @@
     
-let 
 style
- = 
+s.push(
 this
@@ -2212,55 +2212,8 @@
 ey))
-;%0A        if (style !== null) styles.push(style
 );%0A 
@@ -2292,16 +2292,33 @@
 (styles.
+filter(el =%3E el).
 join(';'

Remove code duplication