import Pickr from "../libs/color_pickr.min";

export class PixelioCartAbandonRecoveryMoreColorPickers {

	constructor() {}

	/**
	 * Create multiple color pickers
	 * @param {Array} data - array of color picker configs
	 */
	pixelioCartAbandonRecoveryMoreCreateColor(data) {
		this.allColorPickers = data;

		this.allColorPickers.forEach((picker) => {
			const elements = jQuery(picker.className);
			elements.each((_, element) => {
				this.pixelioCartAbandonRecoveryMoreCreateTimerTextColorPickr(element, picker.selectors, picker.callback, picker.inputSelector);
			});
		});
	}

	/**
	 * Create single Pickr color picker instance
	 * @param {HTMLElement} element
	 * @param {String|null} selectors
	 * @param {Function|null} callback
	 * @param {String|null} inputSelector
	 */
	pixelioCartAbandonRecoveryMoreCreateTimerTextColorPickr(element, selectors, callback = null, inputSelector = null) {
		const pickr = Pickr.create({
			el: element,
			useAsButton: true,
			theme: 'nano',
			swatches: [
				'rgba(244, 67, 54, 1)', 'rgba(233, 30, 99, 0.95)',
				'rgba(156, 39, 176, 0.9)', 'rgba(103, 58, 183, 0.85)',
				'rgba(63, 81, 181, 0.8)', 'rgba(33, 150, 243, 0.75)',
				'rgba(3, 169, 244, 0.7)', 'rgba(0, 188, 212, 0.7)',
				'rgba(0, 150, 136, 0.75)', 'rgba(76, 175, 80, 0.8)',
				'rgba(139, 195, 74, 0.85)', 'rgba(205, 220, 57, 0.9)',
				'rgba(255, 235, 59, 0.95)', 'rgba(255, 193, 7, 1)'
			],
			components: {
				preview: true,
				opacity: true,
				hue: true,
				interaction: {
					hex: true,
					rgba: true,
					hsla: true,
					hsva: true,
					cmyk: true,
					input: true,
					clear: true,
					save: true
				}
			},
			autoReposition: true
		});

		pickr.on('save', color => {
			if (callback) {
				callback(element, pickr.getSelectedColor().toRGBA().toString(0), selectors, inputSelector);
			}
			pickr.hide();
		});
	}

}
