import Ember from 'ember';
import Component from '@ember/component';
import { computed } from '@ember/object';
import $ from 'jquery'

export default Component.extend({
    tagName: 'span',
    classNames: ['inline'],
    index: 0,
    images: computed.alias('previews'),
    'image-height': 22,
    imageHeight: computed.alias('image-height'),
    'image-style': 'border-radius: 8%; border: 1px solid #DCDCDC; max-width: 32px;',
    imageStyle: computed.alias('image-style'),
    didReceiveAttrs() {
        let me = this;
        let images = me.get('images');
        if (Ember.$.type(images) === 'string') {
            let sep = me.get('separator');
            me.set('images', sep ? images.split(sep) : [images]);
        }
    },
    didInsertElement() {
        let me = this;
        me._super(...arguments);
        let rel = me.get('elementId') + '_preview';
        let $overflow = '';

        me.$('a[data-rel="' + rel + '"]').colorbox({
            rel: rel,
            reposition: true,
            // scalePhotos: true,
            scrolling: false,
            photo: true,
            previous: '<i class="ace-icon fa fa-arrow-left"></i>',
            next: '<i class="ace-icon fa fa-arrow-right"></i>',
            close: '&times;',
            current: '{current} of {total}',
            maxWidth: '100%',
            maxHeight: '100%',
            onOpen: function() {
                $overflow = document.body.style.overflow;
                document.body.style.overflow = 'hidden';
            },
            onClosed: function() {
                document.body.style.overflow = $overflow;
            },
            onComplete: function() {
                Ember.$.colorbox.resize();
            }
        });

        Ember.run.once(() => {
            // add a custom loading icon
            $('#cboxLoadingGraphic').html('<i class="ace-icon fa fa-spinner orange fa-spin"></i>');
        });
    }
});