import $ from 'jquery';

// Extend VP class.
$(document).on('extendClass.vpf', (event, VP) => {
	if (event.namespace !== 'vpf') {
		return;
	}

	/**
	 * Init fjGallery plugin
	 *
	 * @param {mixed} options    - gallery options.
	 * @param {mixed} additional - additional args.
	 */
	VP.prototype.initFjGallery = function (options = false, additional = null) {
		const self = this;

		if (self.$items_wrap.fjGallery && self.options.layout === 'justified') {
			const initOptions =
				options !== false
					? options
					: {
							gutter: {
								horizontal:
									parseFloat(self.options.itemsGap) || 0,
								vertical:
									self.options.itemsGapVertical !== ''
										? parseFloat(
												self.options.itemsGapVertical
										  ) || 0
										: parseFloat(self.options.itemsGap) ||
										  0,
							},
							rowHeight:
								parseFloat(self.options.justifiedRowHeight) ||
								200,
							maxRowsCount:
								parseInt(
									self.options.justifiedMaxRowsCount,
									10
								) || 0,
							lastRow: self.options.justifiedLastRow || 'left',
							rowHeightTolerance:
								parseFloat(
									self.options.justifiedRowHeightTolerance
								) || 0,
							calculateItemsHeight: true,
							itemSelector: '.vp-portfolio__item-wrap',
							imageSelector: '.vp-portfolio__item-img img',
							transitionDuration: '0.3s',
					  };

			if (initOptions.maxRowsCount === 0) {
				initOptions.maxRowsCount = Number.POSITIVE_INFINITY;
			}

			self.emitEvent('beforeInitFjGallery', [initOptions, additional]);

			self.$items_wrap.fjGallery(initOptions, additional);

			self.emitEvent('initFjGallery', [initOptions, additional]);
		}
	};

	/**
	 * Destroy fjGallery plugin
	 */
	VP.prototype.destroyFjGallery = function () {
		const self = this;
		const fjGallery = self.$items_wrap.data('fjGallery');

		if (fjGallery) {
			self.$items_wrap.fjGallery('destroy');

			self.emitEvent('destroyFjGallery');
		}
	};
});

// Add Items.
$(document).on('addItems.vpf', (event, self, $items, removeExisting) => {
	if (event.namespace !== 'vpf') {
		return;
	}

	const fjGallery = self.$items_wrap.data('fjGallery');

	if (!fjGallery) {
		return;
	}

	if (removeExisting) {
		self.destroyFjGallery();
		self.$items_wrap.find('.vp-portfolio__item-wrap').remove();
		self.$items_wrap.prepend($items);
		self.initFjGallery();
	} else {
		self.$items_wrap.append($items);
		self.initFjGallery('appendImages', $items);
	}
});

// Init.
$(document).on('init.vpf', (event, self) => {
	if (event.namespace !== 'vpf') {
		return;
	}

	self.initFjGallery();
});

// Images Loaded.
$(document).on('imagesLoaded.vpf', (event, self) => {
	if (event.namespace !== 'vpf') {
		return;
	}

	// sometimes on iOs images failed to calculate positions, so we need this imagesLoaded event.
	// related issue: https://github.com/nk-crew/visual-portfolio/issues/55
	self.initFjGallery();
});

// Destroy.
$(document).on('destroy.vpf', (event, self) => {
	if (event.namespace !== 'vpf') {
		return;
	}

	self.destroyFjGallery();
});