Source: components/filter/filter-tree/filter-option-item/filter-option-item-sub-category.js

import jQ from 'jquery';

import FilterOptionItem from './filter-option-item';
import Class from '../../../../helpers/class';
import Utils from '../../../../helpers/utils';

/**
 * Filter option item for displayType = 'sub_category'
 * 'sub_category' is deprecated. Use 'multi_level_collections' instead.
 * @extends FilterOptionItem
 */
class FilterOptionItemSubCategory extends FilterOptionItem {
	getTemplate() {
		return `
			<li class="{{class.filterOptionItem}} {{class.filterOptionLabel}}">
				<div class="boost-pfs-filter-option-item-parent-category">
					<span role="button" aria-controls="sub-category-{{value}}" aria-expanded="true" class="sub-icon {{closeClass}}"></span>
					<a href="javascript:;" class="{{class.filterOptionItem}} {{class.filterOptionLabel}} boost-pfs-filter-option-main-cat">
						{{label}}
					</a>
				</div>
				<ul class="boost-pfs-filter-option-item-sub-category-list">
					{{subItems}}
				</ul>
			</li>
		`;
	}

	getSubItemTemplate() {
		return `
			<li class="{{class.filterOptionItem}} {{class.filterOptionLabel}} {{selected}} boost-pfs-filter-option-item-sub-category">
				<a href="javascript:;">
					{{subLabel}}
				</a>
			</li>
		`;
	}

	compileTemplate() {
		var subItemsHtml = '';
		if (Array.isArray(this.tags)) {
			this.tags.forEach((tag) => {
				var isTagSelected = this.isSubCategorySelected(tag);
				subItemsHtml += this.getSubItemTemplate()
					.replace(/{{subLabel}}/g, tag)
					.replace(/{{selected}}/g, isTagSelected ? 'selected' : '');
			})
		}
		
		return this.getTemplate()
			.replace(/{{subItems}}/g, subItemsHtml)
			.replace(/{{class.filterOptionItem}}/g, Class.filterOptionItem)
			.replace(/{{class.filterOptionLabel}}/g, Class.filterOptionLabel)
			.replace(/{{disabled}}/g, this.isDisabled() ? 'disabled' : '')
			.replace(/{{label}}/g, this.label)
			.replace(/{{value}}/g, this.value)
			.replace(/{{countLabel}}/g, this.countLabel);
	}

	bindEvents() {
		this.$element.on('click', this.redirectToCollection.bind(this));

		// Bind click events on sub items
		this.$element.find('ul > li').on('click', this.redirectToSubCategory.bind(this));
	}

	isSubCategorySelected(tag) {
		if (!Utils.isSearchPage()) {
			var pathName = decodeURIComponent(window.location.pathname);
			var splitPathname = pathName.split('/');
			if (splitPathname[splitPathname.length - 1] == Utils.slugify(tag)){
				this.isAnyTagSelected = true;
				return true;
			} 
		}
		return false;
	}

	// For subcategory we don't perform filter, just redirect by url
	redirectToCollection(event) {
		event.preventDefault();
		event.stopPropagation();
		var link = '/collections/' + this.handle;
		Utils.setWindowLocation(link);
	}

	// For subcategory we don't perform filter, just redirect by url
	redirectToSubCategory(event) {
		event.preventDefault();
		event.stopPropagation();
		var tagLabel = jQ(event.currentTarget).find('a').html();
		var tag = Utils.slugify(tagLabel);
		var subLink = '/collections/' + this.handle + '/' + tag;
		Utils.setWindowLocation(subLink);
	}

	setData(data) {
		super.setData(data);
		this.tags = data.tags;
	}
}

export default FilterOptionItemSubCategory;