import Ember from 'ember';
import layout from '../templates/components/yebo-pdp';
/**
  The Yebo Product Display Page.

  **To Override:** You'll need to run the components generator:

  ```bash
  ember g yebo-ember-storefront-components
  ```

  This will install all of the Yebo Ember Storefront component files into your
  host application at `app/components/yebo-*.js`, ready to be extended or
  overriden.

  @class YeboPdp
  @namespace Component
  @extends Ember.Component
*/
export default Ember.Component.extend({
  layout: layout,
  variantSelection: null,
  quantity: 1,
  action: 'addToCart',

  selectedVariant: Ember.computed('product.variants', function() {
    var selection = this.get('variantSelection');

    if (selection && selection.get("images").any()) {
      return selection;
    } else {
      return this.get('product.master');
    }
  }),

  actions: {
    addToCart: function() {
      this.sendAction('action', this.get('selectedVariant'), this.get('quantity'));
    }
  }
});

@@ -598,16 +598,21 @@
 Cart',%0A%0A
+  //%0A
   select
@@ -661,125 +661,365 @@
 s', 
-function() %7B%0A    var selection = this.get('variantSelection');%0A%0A    if (selection && selection.get(%22images%22).any()) %7B
+'variantSelection', function() %7B%0A    // Get the selection%0A    let selection = this.get('variantSelection');%0A%0A    // If the select exists, return it%0A    if( selection )%0A      return selection;%0A%0A    // Try to get the first variant%0A    let firstVariant = this.get('product.variants.firstObject');%0A%0A    // Check if the firstVariant exists%0A    if( firstVariant )
 %0A   
@@ -1032,31 +1032,30 @@
 urn 
-selection
+firstVariant
 ;%0A   
- %7D
  else
- %7B
 %0A   
@@ -1096,21 +1096,20 @@
 ');%0A
-    %7D%0A
   %7D),%0A%0A
+  //%0A
   ac
@@ -1117,16 +1117,23 @@
 ions: %7B%0A
+    //%0A
     addT
@@ -1236,16 +1236,250 @@
 ity'));%0A
+    %7D,%0A%0A    //%0A    selectVariant: function(variantId) %7B%0A      // Set as the selected variant%0A      // @todo Check if there is problem with this way%0A      this.set('variantSelection', this.yebo.store.peekRecord('variant', variantId));%0A
     %7D%0A  

Make the yebo-pdp component work with variants