(function ($, rwmb) {
  'use strict';

  if (typeof rwmb === 'undefined') {
    console.error('rwmb is not defined');
    return;
  }

  var views = (rwmb.views = rwmb.views || {}),
    MediaField = views.MediaField,
    MediaItem = views.MediaItem,
    MediaList = views.MediaList,
    ImageField;

  ImageField = views.ImageField = MediaField.extend({
    createList: function () {
      this.list = new MediaList({
        controller: this.controller,
        itemView: MediaItem.extend({
          className: 'rwmb-image-item',
          template: rwmb.template(`
						<input type="hidden" name="{{{ data.controller.fieldName }}}" value="{{{ data.id }}}" class="rwmb-media-input">
						<div class="rwmb-file-icon">
							<# if ( 'image' === data.type && data.sizes ) { #>
								<# if ( data.sizes[data.controller.imageSize] ) { #>
									<img src="{{{ data.sizes[data.controller.imageSize].url }}}">
								<# } else { #>
									<img src="{{{ data.sizes.full.url }}}">
								<# } #>
							<# } else { #>
								<# if ( data.image && data.image.src && data.image.src !== data.icon ) { #>
									<img src="{{ data.image.src }}" />
								<# } else { #>
									<img src="{{ data.icon }}" />
								<# } #>
							<# } #>
						</div>
						<div class="rwmb-image-overlay"></div>
						<div class="rwmb-image-actions">
							<a class="rwmb-image-edit rwmb-edit-media" title="{{{ i18nRwmbMedia.edit }}}" href="{{{ data.editLink }}}" target="_blank">
								<span class="dashicons dashicons-edit"></span>
							</a>
							<a href="#" class="rwmb-image-delete rwmb-remove-media" title="{{{ i18nRwmbMedia.remove }}}">
								<span class="dashicons dashicons-no-alt"></span>
							</a>
						</div>
					`),
        }),
      });
    },
  });

  /**
   * Initialize image fields
   */
  function initImageField() {
    var $this = $(this),
      view = $this.data('view');

    if (view) {
      return;
    }

    view = new ImageField({ input: this });

    $this.siblings('.rwmb-media-view').remove();
    $this.after(view.el);
    $this.data('view', view);
  }

  function init(e) {
    $(e.target).find('.rwmb-custom_image_advanced').each(initImageField);
  }

  rwmb.$document.on('mb_ready', init).on('clone', '.rwmb-custom_image_advanced', initImageField);
})(jQuery, rwmb);
