import Ember from 'ember';
import { fullUrlForImage } from '../helpers/full-url-for-image';
const { computed } = Ember;

export default Ember.Component.extend({
  classNames: ['cell'],
  classNameBindings: ['placement'],
  attributeBindings: ['style'],
  style: computed('', function () {
    var image = this.get('image');
    return 'background-image: url(' + fullUrlForImage([image]) + ')';
  }),
  placement: computed.alias('position'),
  //Events
  click: function () {
    this.send('openGallery');
  },
  //Actions
  actions: {
    openGallery: function() {
      var self = this;
      var getComponentByClassName = function (className) {
        var viewRegistry = self._viewRegistry;
        var component = null;

        for (var key in viewRegistry) {
          var current = viewRegistry[key];
          var classNames = current.classNames.join('|');
          if (classNames.indexOf(className) !== -1) {
            component = current;
          }
        }
        return component;
      };

      var imageGallery = getComponentByClassName('image-gallery');
      if (imageGallery) {
        imageGallery.send('open', this.get('image'));
      }
    }
  }
});
