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

import FilterOptionItem from './filter-option-item';
import Class from '../../../../helpers/class';
import FilterTreeEnum from '../../../../enum/filter-tree-enum';

/**
 * Filter option item for displayType = 'box'
 * @extends FilterOptionItem
 */
class FilterOptionItemBox 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 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(/{{disabled}}/g, this.isDisabled() ? 'disabled' : '')
			.replace(/{{class.button}}/g, Class.button)
			.replace(/{{label}}/g, this.label)
			.replace(/{{countLabel}}/g, this.countLabel);
	}

	bindEvents() {
		super.bindEvents();
		this.setBoxItemSize();
	}

	/**
	 * Set the css 'width' value of each box.
	 * This is called in 'bindEvents', after its element is rendered on the DOM
	 */
	setBoxItemSize() {
		if (this.filterTreeType == FilterTreeEnum.FilterTreeType.VERTICAL && this.$element) {
			this.$element.css('width', this.parent.calculateBoxItemSize());
		}
	}
}

export default FilterOptionItemBox;