Source: components/filter/filter-tree/filter-option-item/filter-option-item-list.js

import FilterOptionItem from './filter-option-item';
import Class from '../../../../helpers/class';
import FilterOptionEnum from "../../../../enum/filter-option-enum";

/**
 * Filter option item for displayType = 'list'
 * @extends FilterOptionItem
 */
class FilterOptionItemList extends FilterOptionItem {
	constructor(filterTreeType) {
		super(filterTreeType);

		this.$element = null;
	}

	getTemplate() {
		// Filter by collection uses <a> tag
		if (this.parent.filterType == FilterOptionEnum.FilterType.COLLECTION) {
			return `
				<li class="{{class.filterOptionItem}} {{class.filterOptionLabel}} {{disabled}}">
					<a class="{{class.button}}" href="{{href}}">
						<span class="boost-pfs-check-box"></span>
						<span class="boost-pfs-filter-option-value">{{label}}</span>
						<span class="boost-pfs-filter-option-amount">{{countLabel}}</span>
					</a>
				</li>
			`;
		// Else uses <button>
		} else {
			return `
				<li class="{{class.filterOptionItem}} {{class.filterOptionLabel}} {{disabled}}">
					<button role="checkbox" class="{{class.button}}">
						<span class="boost-pfs-check-box"></span>
						<span class="boost-pfs-filter-option-value">{{label}}</span>
						<span class="boost-pfs-filter-option-amount">{{countLabel}}</span>
					</button>
				</li>
			`;
		}
	}

	compileTemplate() {
		return this.getTemplate()
			.replace(/{{class.filterOptionItem}}/g, Class.filterOptionItem)
			.replace(/{{class.filterOptionLabel}}/g, Class.filterOptionLabel)
			.replace(/{{class.button}}/g, Class.button)
			.replace(/{{disabled}}/g, this.isDisabled() ? 'disabled' : '')
			.replace(/{{label}}/g, this.label)
			.replace(/{{href}}/g, this.href)
			.replace(/{{countLabel}}/g, this.countLabel);
	}
}

export default FilterOptionItemList;