Source: components/filter/filter-tree/filter-style/filter-tree-style3.js

import jQ from 'jquery';

import FilterTree from "../filter-tree";
import Settings from "../../../../helpers/settings";
import FilterTreeEnum from "../../../../enum/filter-tree-enum";
import Utils from "../../../../helpers/utils";
import Class from "../../../../helpers/class";

/**
 * Filter tree style 3
 * Applies to veritcal, on mobile only
 * @extends FilterTree
 */
class FilterTreeStyle3 extends FilterTree {
	constructor(id, filterTreeType) {
		super(id, filterTreeType);
		this.style = 'style3';
		this.selector.refineByOnTitle = '.boost-pfs-filter-selected-items-mobile';
	}

	init() {
		super.init();
		if (jQ(this.idSelector).length > 0) {
			jQ(this.idSelector).addClass('boost-pfs-filter-tree-mobile-style3').addClass('boost-pfs-filter-tree-mobile-sticky');
			if(Settings.getSettingValue('general.filterTreeMobileStyleFullWidth')){
				jQ(this.idSelector).addClass('boost-pfs-filter-tree-mobile-full-width-style')
			}
		}
	}

	render() {
		super.render();
		if (this.$element && Utils.isMobile()) {
			this.filterOptions.forEach(filterOption => {
				if (filterOption.$element) {

					// Render refine by
					if (this.refineBy && this.refineBy.refineByItems) {
						var refineByLabels = [];
						this.refineBy.refineByItems.forEach(refineByItem => {
							if (refineByItem.filterOptionId == filterOption.filterOptionId) {
								var label = refineByItem.buildLabel();
								if (label) {
									refineByLabels.push(label);
								}
							}
						})
						filterOption.$element.find(this.selector.refineByOnTitle).html(refineByLabels.join(', '));
					}

				}
			})
		}
	}
	renderFilterTreeFooter() {
		var numberResult = this.parent && this.parent.data ? ' ('+ this.parent.data.total_product +')' : '';
		this.$element.find('.' + Class.showResultFilterButton).html(Labels.showResult + numberResult);
	}

	/**
	 * On clicking on mobile button, open the filter tree
	 * This function is called by mobile button component
	 * @param {Object} event - The onclick event
	 */
	onClickMobileButton(event) {
		if (event) {
			event.stopImmediatePropagation();
			event.stopPropagation();
		}
		var $filterTreeElement = jQ(this.idSelector);
		if ($filterTreeElement) {
			this.mobileButton.isCollapsed = !this.mobileButton.isCollapsed;
			if (this.mobileButton.isCollapsed) {
				$filterTreeElement.removeClass(Class.filterTreeMobileOpen);
				jQ('body').removeClass('boost-pfs-body-no-scroll');
				jQ('html').removeClass('boost-pfs-body-no-scroll');
			} else {
				$filterTreeElement.addClass(Class.filterTreeMobileOpen);
				jQ('body').addClass('boost-pfs-body-no-scroll');
				jQ('html').addClass('boost-pfs-body-no-scroll');
			}
		}
		this.mobileButton.afterToggleFilterTree();
	}

	/**
	 * Checks condition to see if filter tree is active
	 * @param {FilterTreeEnum} filterTreeType - 'vertical' or 'horizontal'
	 * @returns {boolean}
	 */
	static isActive(filterTreeType) {
		return filterTreeType == FilterTreeEnum.FilterTreeType.VERTICAL
			&& Settings.getSettingValue('general.filterTreeMobileStyle') == 'style3';
	}
}

export default FilterTreeStyle3;