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

import FilterOptionItem from './filter-option-item';
import Class from '../../../../helpers/class';
import Labels from '../../../../helpers/labels';
import Settings from "../../../../helpers/settings";

/**
 * Filter option item for displayType = 'rating'
 * @extends FilterOptionItem
 */
class FilterOptionItemRating extends FilterOptionItem {
	getTemplate() {
		return `
			<li class="{{class.filterOptionItem}} {{class.filterOptionLabel}} {{disabled}}">
				<button role="checkbox" class="{{class.button}}">
					<span class="boost-pfs-check-box"></span>
					<span role="presentation" class="boost-pfs-filter-option-value">
						<i style="color: {{starColor}}" class="{{class.filterOptionItemStar}} {{active}}"></i><!--
						--><i style="color: {{starColor}}" class="{{class.filterOptionItemStar}} {{active}}"></i><!--
						--><i style="color: {{starColor}}" class="{{class.filterOptionItemStar}} {{active}}"></i><!--
						--><i style="color: {{starColor}}" class="{{class.filterOptionItemStar}} {{active}}"></i><!--
						--><i style="color: {{starColor}}" class="{{class.filterOptionItemStar}} {{active}}"></i>
						<span>{{label}}</span>
					</span>	
					<span class="boost-pfs-filter-option-amount">{{countLabel}}</span>
				</button>
			</li>
		`;
	}

	compileTemplate() {
		var template = this.getTemplate();
		for (var i = 0; i < this.from; i++) {
			template = template.replace(/{{active}}/, '{{class.filterOptionItemStarActive}}')
		}
		template = template.replace(/{{active}}/g, '');

		return template
			.replace(/{{class.filterOptionItem}}/g, Class.filterOptionItem)
			.replace(/{{class.filterOptionLabel}}/g, Class.filterOptionLabel)
			.replace(/{{class.filterOptionItemStar}}/g, Class.filterOptionItemStar)
			.replace(/{{class.filterOptionItemStarActive}}/g, Class.filterOptionItemStarActive)
			.replace(/{{class.button}}/g, Class.button)
			.replace(/{{disabled}}/g, this.isDisabled() ? 'disabled' : '')
			.replace(/{{label}}/g, this.label)
			.replace(/{{countLabel}}/g, this.countLabel)
			.replace(/{{adaLabel}}/g, this.adaLabel)
			.replace(/{{starColor}}/g, this.parent.starColor)
			.replace(/{{class.button}}/g, Class.button)
			.replace(/\r?\n|\r/g, ''); // Remove line breaks between the stars
	}

	render() {
		this.label = this.parent.showExactRating ? '' : Labels.ratingUp;
		this.adaLabel = this.from;
		if (this.from == 1) {
			this.adaLabel += ' ' + Labels.ratingStar;
		} else {
			this.adaLabel += ' ' + Labels.ratingStars;
		}
		if (this.parent.showExactRating) {
			this.adaLabel += ' ' + Labels.ratingUp;
		}

		super.render();
	}
}

export default FilterOptionItemRating;