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

import FilterOptionItem from './filter-option-item';
import Class from '../../../../helpers/class';
import FilterOptionEnum from '../../../../enum/filter-option-enum';
import Settings from '../../../../helpers/settings';
import Utils from '../../../../helpers/utils';
import Globals from '../../../../helpers/globals';

/**
 * Filter option item for displayType = 'swatch'
 * @extends FilterOptionItem
 */
class FilterOptionItemSwatch extends FilterOptionItem {

	/**
	 * Get the swatch type enum
	 */
	static get SwatchType() {
		return {
			ONE_COLOR: 'one_color',
			TWO_COLORS: 'two_colors',
			IMAGE: 'image'
		}
	}

	getTemplate() {
		return `
			<li class="{{class.filterOptionItem}} {{disabled}} {{swatchBorder}}">
				<span class="boost-pfs-filter-option-swatch-image" 
					style="background-color: {{backgroundColor}}; 
					background-image: {{backgroundImage}});" title="{{label}}">
				</span>
				<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)
			.replace(/{{backgroundColor}}/g, this.backgroundColor)
			.replace(/{{backgroundImage}}/g, this.backgroundImage)
			.replace(/{{swatchBorder}}/g, this.swatchBorder);
	}

	render() {
		// Build swatch from swatch settings in admin
		var hasSwatchSettings = this.buildSwatchSettings();

		// If don't have swatch settings, fallback to default file names
		if (!hasSwatchSettings) {
			this.swatchFileName = this.buildSwatchFileName();
			this.swatchFileUrl = Utils.getFilePath(this.swatchFileName, Globals.swatchExtension, Settings.getSettingValue('general.swatchImageVersion'));
			this.backgroundImage = 'url(' + this.swatchFileUrl + ');';
			this.backgroundColor = this.buildBackgroundColor();
		}

		this.swatchBorder = ['white', '#FFFFFF'].includes(this.backgroundColor) ? 'has-border' : '';

		super.render();
	}

	/**
	 * Build swatch settings
	 * based on setting in admin
	 * @returns {boolean} - Has swatch settings or not
	 */
	buildSwatchSettings() {
		var swatchSettings = Settings.getSettingValue('swatch_settings');
		var hasSwatchSetting = false;
		if (swatchSettings && swatchSettings[this.value]) {
			this.swatchSetting = swatchSettings[this.value];
			switch (this.swatchSetting.type) {
				case FilterOptionItemSwatch.SwatchType.ONE_COLOR:
					if (this.swatchSetting.colorCodes.length > 0 && this.swatchSetting.colorCodes[0]) {
						this.backgroundImage = 'none';
						this.backgroundColor = this.swatchSetting.colorCodes[0];
						hasSwatchSetting = true;
					}
					break;
				case FilterOptionItemSwatch.SwatchType.TWO_COLORS:
					if (this.swatchSetting.colorCodes.length > 1 && this.swatchSetting.colorCodes[0] && this.swatchSetting.colorCodes[1]) {
						this.backgroundImage = 'linear-gradient(to top left, ' + this.swatchSetting.colorCodes[0] + ' 50%, ' + this.swatchSetting.colorCodes[1] + ' 50%);';
						this.backgroundColor = 'transparent';
						hasSwatchSetting = true;
					}
					break;
				case FilterOptionItemSwatch.SwatchType.IMAGE:
					if (this.swatchSetting.imageUrl) {
						this.swatchFileUrl = this.swatchSetting.imageUrl;
						this.backgroundImage = 'url(' + this.swatchFileUrl + ');';
						this.backgroundColor = this.buildBackgroundColor(); // Fallback color for image
						hasSwatchSetting = true;
					}
					break;
			}
		}

		return hasSwatchSetting;
	}

	/**
	 * Build swatch file name based on
	 * parent.filterOptionId, parent.prefix, and this.label
	 * @returns {string} - The swatch file name
	 */
	buildSwatchFileName() {
		var filterOptionId = this.parent.filterOptionId;
		var filterOptionPrefix = this.parent.prefix;

		var swatchName = this.value;
        if (this.parent.filterType == FilterOptionEnum.FilterType.COLLECTION) {
            swatchName = this.label;
        }
		
        // Get prefix of swatch from filter option id
		var prefixSwatch = this.parent.label.trim().toLowerCase().replace(/ /g,'_');
		if (Settings.getSettingValue('general.removePrefixFromSwatchFile') && filterOptionPrefix) {
			var prefix = filterOptionPrefix.replace(/\\/g, '');
			swatchName = swatchName.replace(prefix, '');
		}
		var swatchFileName = prefixSwatch + '-' + Utils.slugify(swatchName).replace(/\#/g, '');
		return swatchFileName;
	}

	/**
	 * Build background color based on this.label
	 * @returns {string} - The swatch background color
	 */
	buildBackgroundColor() {
		var splitColorArr = Utils.slugify(this.label).split('-');
		return splitColorArr[splitColorArr.length - 1];
	}
}

export default FilterOptionItemSwatch;