Source: components/instant-search/instant-search-style/instant-search-result-style2.js

import jQ from "jquery";

import Utils from "../../../helpers/utils";
import Settings from "../../../helpers/settings";
import Class from "../../../helpers/class";
import InstantSearchEnum from "../../../enum/instant-search-enum";
import InstantSearchResult from "./instant-search-result";

/**
 * Instant search result - style 2
 * @extends InstantSearchResult
 */
class InstantSearchResultStyle2 extends InstantSearchResult {
	/**
	 * @constructs
	 * @param {String} id The element ID of search input
	 * @param {*} $element The jQuery object of search input element
	 */
	constructor(id, $element) {
		super(id, $element);
	}

	/**
	 * Returns whether or not this instant search result style is used
	 */
	static isActive() {
		return !Utils.isMobile() && Settings.getSettingValue('search.suggestionStyle') === 'style2';
	}

	/**
	 * Sorting the blocks in result data
	 */
	_applyFilterBlockSettings() {
		// Put the Product block to top for Style2
		if (this.blockSettings[0].type !== InstantSearchEnum.ResultType.PRODUCTS) {
			var indexProducts = this.blockSettings.findIndex(function(block) {
				return block.type == InstantSearchEnum.ResultType.PRODUCTS;
			});
			var tempProducts = this.blockSettings[indexProducts];
			this.blockSettings.splice(indexProducts, 1);
			if (Settings.getSettingValue('search.suggestionStyle2ReverseProductBlock')) {
				this.blockSettings.push(tempProducts);
			} else {
				this.blockSettings.unshift(tempProducts);
			}
		}
	}

	/**
	 * Append Suggestion box to header if suggestionStyle = style2
	 */
	_applyFilterAutocompleteAppendElement(element) {
		this.appendToSelector = Settings.getSettingValue('search.suggestionStyle2MainContainerSelector') || 'header:first';
	}

	/**
	 * Setup Classes, Position for Instant search wrapper
	 */
	_renderWrapper() {
		var mobileClass = Utils.InstantSearch.isFullWidthMobile() ? Class.searchSuggestionMobile : '';
		if (mobileClass !== '') {
			this.$wrapper.addClass(mobileClass);
		}
		
		// Set up class for suggestion style2
		if (this.$wrapper.length) {
			var suggestionWrapperStyle2 = Class.searchSuggestionWrapper + '-' + Settings.getSettingValue('search.suggestionStyle');
			this.$wrapper
				.addClass(suggestionWrapperStyle2)
				.addClass(suggestionWrapperStyle2 + '-width-fullwidth')
				.addClass(Class.searchSuggestion + '-products-per-row-' + Settings.getSettingValue('search.suggestionStyle2ProductPerRow'))
				.addClass(Class.searchSuggestion + '-reverse-product-block-' + Settings.getSettingValue('search.suggestionStyle2ReverseProductBlock'));
		}

		// Set suggestion wrapper, popover, and ul position
		var suggestionPosition = this._setSuggestionPosition();
		suggestionPosition.setSuggetionPosition();
		suggestionPosition.setSuggetionPopoverPosition();
		
		// Set suggestion width
		jQ(window).resize(() => {
			suggestionPosition.setSuggetionPopoverPosition();
		});
	}
}

export default InstantSearchResultStyle2;