import Ember from 'ember';
import $ from 'jquery';

import Component from 'ember-component';
import computed from 'ember-computed';
import get from 'ember-metal/get';
import { htmlSafe } from 'ember-string';
import { isEmberArray } from 'ember-array/utils';

const { defineProperty } = Ember;

const defaultPropertyObject = {
  format() {
    return Array.prototype.slice.call(arguments, 0).join(', ');
  },
  style: {
    width:           'auto',

    horizontalAlign: 'inherit',
    verticalAlign:   'inherit',

    backgroundColor: 'inherit',

    fontFamily:      'inherit',
    fontWeight:      'inherit',
    italic:          false,
    fontColor:       'inherit',

    borderWidth:     3,
    borderColor:     'inherit',
    borderStyle:     'inherit'
  }
};

function copy(object) {
  return $.extend({}, object);
}

export default Component.extend({
  tagName: 'td',
  attributeBindings: ['style'],

  _property: computed('property', function() {
    return $.extend({}, defaultPropertyObject, get(this, 'property'));
  }),

  style: computed('_values', '_property.style',
  function() {
    let values = get(this, '_values');
    let style  = copy(get(this, '_property.style'));

    // if style property is a function, return style depending on value
    for (let property in style) {
      if (style.hasOwnProperty(property) &&
          typeof style[property] === 'function') {
        style[property] = style[property](...values);
      }
      if (typeof style[property] === 'boolean') {
        style[property] = style[property] ? property : 'inherit';
      }
    }

    return htmlSafe(`
      width:            ${style.width}em;
      text-align:       ${style.horizontalAlign};
      vertical-align:   ${style.verticalAlign};
      background-color: ${style.backgroundColor};
      font-family:      ${style.fontFamily};
      font-weight:      ${style.fontWeight};
      font-style:       ${style.italic};
      color:            ${style.fontColor};
      border-width:     ${style.borderWidth}px;
      border-color:     ${style.borderColor};
      border-style:     ${style.borderStyle};
    `);
  }),

  value: computed('_values', '_property.{format}', function() {
    let values = get(this, '_values');
    let format = get(this, '_property.format');

    return format.apply(null, values);
  }),

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

    let propertyPaths = get(this, 'property.key');
    if (!isEmberArray(propertyPaths)) {
      propertyPaths = [propertyPaths];
    }

    defineProperty(this, '_values', computed(`item.{${propertyPaths.join(',')}}`,
    function() {
      return propertyPaths.map((key) => {
        return get(this, `item.${key}`);
      });
    }));
  }
});

@@ -177,16 +177,27 @@
 htmlSafe
+, dasherize
  %7D from 
@@ -414,23 +414,42 @@
 %0A  %7D
-,%0A  style: %7B%0A  
+%0A%7D;%0A%0Aconst STYLING_PROPERTIES = %7B%0A
   wi
@@ -467,19 +467,26 @@
     
-'auto',%0A%0A  
+%7B suffix: 'em' %7D,%0A
   ho
@@ -500,29 +500,39 @@
 lAlign: 
-'inherit',%0A  
+%7B key: 'text-align' %7D,%0A
   vertic
@@ -542,30 +542,21 @@
 lign:   
-'inherit',%0A%0A  
+%7B %7D,%0A
   backgr
@@ -566,30 +566,21 @@
 dColor: 
-'inherit',%0A%0A  
+%7B %7D,%0A
   fontFa
@@ -590,29 +590,21 @@
 y:      
-'inherit',%0A  
+%7B %7D,%0A
   fontWe
@@ -614,29 +614,21 @@
 t:      
-'inherit',%0A  
+%7B %7D,%0A
   italic
@@ -642,17 +642,31 @@
     
-false,%0A  
+%7B key: 'font-style' %7D,%0A
   fo
@@ -684,22 +684,26 @@
     
-'inherit',%0A%0A  
+%7B key: 'color' %7D,%0A
   bo
@@ -721,13 +721,26 @@
     
-3
+%7B suffix: 'px' %7D
 ,%0A
-  
   bo
@@ -758,21 +758,13 @@
     
-'inherit'
+%7B %7D
 ,%0A
-  
   bo
@@ -782,19 +782,9 @@
     
-'inherit'%0A 
+%7B
  %7D%0A%7D
@@ -1207,16 +1207,37 @@
 tyle'));
+%0A    let styles = %5B%5D;
 %0A%0A    //
@@ -1602,566 +1602,374 @@
 y : 
-'inherit';%0A      %7D%0A    %7D%0A%0A    return htmlSafe(%60%0A      width:            $%7Bstyle.width%7Dem;%0A      text-align:       $%7Bstyle.horizontalAlign%7D;%0A      vertical-align:   $%7Bstyle.verticalAlign%7D;%0A      background-color: $%7Bstyle.backgroundColor%7D;%0A      font-family:      $%7Bstyle.fontFamily%7D;%0A      font-weight: 
+null;%0A      %7D%0A%0A      let value = style%5Bproperty%5D;%0A      let stylingProperty = STYLING_PROPERTIES%5Bproperty%5D;%0A%0A      if (value && stylingProperty) %7B%0A        let key
     
+=
  
-$%7B
 styl
-e.fontWeight%7D;%0A      font-style:       $%7Bstyle.italic%7D;%0A      color:            $%7Bstyle.fontColor%7D;%0A      border-width:     $%7Bstyle.borderWidth%7Dpx;%0A      border-color:     $%7Bstyle.borderColor%7D;%0A      border-style:     $%7Bstyle.borderStyle%7D;%0A    %60
+ingProperty.key %7C%7C dasherize(property);%0A        let suffix = stylingProperty.suffix %7C%7C '';%0A%0A        styles.push(%60$%7Bkey%7D: $%7Bvalue%7D$%7Bsuffix%7D;%60);%0A      %7D%0A    %7D%0A%0A    return htmlSafe(styles.join(' ')
 );%0A 

improve cell styling for undefined value (#12)