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

import FilterOption from './filter-option';
import Settings from '../../../../helpers/settings';

/**
 * Filter option with displayType = 'box'
 * @extends FilterOption
 */
class FilterOptionBox extends FilterOption {
	/**
	 * Get the content html template for DisplayType.BOX
	 * @returns {string} Raw html template
	 */
	getBlockContentTemplate() {
		return `
			<ul class="{{class.filterOptionItemList}} {{class.filterOptionItemListBox}}">{{filterItems}}</ul>
		`;
	}

	/**
	 * Calculate the css 'width' of each box element
	 * @returns {string}
	 */
	calculateBoxItemSize() {
		var isEnableBoxStyle = Settings.getSettingValue('general.enableFilterOptionBoxStyle');

		if (!isEnableBoxStyle) {
			return '';
		}

		var elementWidth = this.$element ? this.$element.width() : 0;
		if (!elementWidth || elementWidth < 0) {
			return '100%';
		}

		if (!this.boxItemSize) {
			var columnWidth = 4;
			var charWidth = Settings.getSettingValue('general.filterOptionBoxCharWidth') || 14;
			this.filterItems.forEach((filterItem) => {
				var textWidth = filterItem.label.length * charWidth;
				columnWidth = Math.max(textWidth, columnWidth);
			})
			var numberOfColumns = Math.floor(this.$element.width() / (columnWidth + 8)) || 1;
			var columnWidthPercent = 100 / numberOfColumns - 2;
			if (columnWidthPercent < 1) columnWidthPercent = 100;
			this.boxItemSize = columnWidthPercent + '%';
		}

		return this.boxItemSize;
	}
}

export default FilterOptionBox;