import Helper_class from './../../libs/helpers.js';
import Dialog_class from './../../libs/popup.js';
import GUI_colors_class from './../gui/gui-colors.js';

const Helper = new Helper_class();

/**
 * This input opens a custom color picker dialog that is more tightly integrated with the application (swatch selection, etc).
 * It can also handle alpha values, whereas native color input can't.
 */

(function ($) {

	const template = `
		<div class="ui_color_input" tabindex="-1">
			<label>Color
			<input type="color">
			</label>
			<div class="alpha_overlay"></div>
		</div>
	`;

	const on_focus_color_input = (event) => {
		const $el = $(event.target.closest('.ui_color_input'));
		$el.trigger('focus');
	};

	const on_blur_color_input = (event) => {
		const $el = $(event.target.closest('.ui_color_input'));
		$el.trigger('blur');
	};

	const on_click_color_input = (event) => {
		event.preventDefault();
		const $el = $(event.target.closest('.ui_color_input'));
		const { value } = $el.data();
		const POP = new Dialog_class();
		let colorsDialog = new GUI_colors_class();
		var settings = {
			title: 'Color Picker',
			on_finish() {
				set_value($el, colorsDialog.COLOR + (colorsDialog.ALPHA < 255 ? colorsDialog.ALPHA.toString(16).padStart(2, '0') : ''));
				$el.trigger('input');
				$el.trigger('change');
				colorsDialog = null;
			},
			params: [
				{
					function() {
						var html = '<div id="dialog_color_picker"></div>';
						return html;
					}
				}
			],
		};
		let colorValue;
		let alpha = 255;
		if (/^\#[0-9A-F]{8}$/gi.test(value)) {
			// Hex with alpha
			colorValue = value.slice(0, 7);
			alpha = parseInt(value.slice(7, 9), 16);
		} else if (/^\#[0-9A-F]{6}$/gi.test(value)) {
			// Hex without alpha
			colorValue = value;
		} else {
			colorValue = '#000000';
		}
		POP.show(settings);
		colorsDialog.render_main_colors('dialog');
		colorsDialog.set_color({ hex: colorValue, a: alpha });
	};

	const set_value = ($el, value) => {
		const trimmedValue = (value + '').trim();
		let colorValue;
		let opacity = 0;
		if (/^\#[0-9A-F]{8}$/gi.test(trimmedValue)) {
			// Hex with alpha
			colorValue = trimmedValue.slice(0, 7);
			opacity = 1 - (parseInt(value.slice(7, 9), 16) * (1 / 255));
		} else if (/^\#[0-9A-F]{6}$/gi.test(trimmedValue)) {
			// Hex without alpha
			colorValue = trimmedValue;
		} else {
			return;
		}
		const { input, overlay } = $el.data();
		overlay.style.opacity = opacity;
		input.value = colorValue;
        $el.data('value', trimmedValue);
	};

	const set_disabled = ($el, disabled) => {
		const { input } = $el.data();
        if (disabled) {
            input.setAttribute('disabled', 'disabled');
        } else {
            input.removeAttribute('disabled');
        }
        $el.data('disabled', disabled);
	};

	$.fn.uiColorInput = function(behavior, ...args) {
		let returnValues = [];
		for (let i = 0; i < this.length; i++) {
			let el = this[i];

			// Constructor
			if (Object.prototype.toString.call(behavior) !== '[object String]') {
				const definition = behavior || {};

				const classList = el.className;
				const id = definition.id != null ? definition.id : el.getAttribute('id');
				const inputId = definition.inputId || '';
				const disabled = definition.disabled != null ? definition.disabled : el.hasAttribute('disabled') ? true : false;
				const value = definition.value != null ? definition.value : el.value || 0;
				const ariaLabeledBy = el.getAttribute('aria-labelledby');

				let $el;
				if (el.parentNode) {
					$(el).after(template);
					const oldEl = el;
					el = el.nextElementSibling;
					$(oldEl).remove();
				} else {
					const orphanedParent = document.createElement('div');
					orphanedParent.innerHTML = template;
					el = orphanedParent.firstElementChild;
				}
				this[i] = el;
				$el = $(el);

				const input = $el.find('input[type="color"]')[0];
				const overlay = $el.find('.alpha_overlay')[0];

				if (classList) {
					el.classList.add(classList);
				}
				if (id) {
					el.setAttribute('id', id);
				}
				if (inputId) {
					input.setAttribute('id', inputId);
				}
				if (ariaLabeledBy) {
					input.setAttribute('aria-labelledby', ariaLabeledBy);
				}

				$el.data({
					id,
					input,
					overlay,
					value
				});

				$(input)
					.on('click', on_click_color_input)
					.on('focus', on_focus_color_input)
					.on('blur', on_blur_color_input)

				set_value($el, value);
				set_disabled($el, disabled);
			}
			// Behaviors
			else if (behavior === 'set_value') {
                const newValue = args[0];
                const $el = $(el);
                if ($el.data('value') !== newValue) {
                    set_value($(el), newValue);
                }
            }
            else if (behavior === 'get_value') {
                returnValues.push($(el).data('value'));
            }
            else if (behavior === 'get_id') {
                returnValues.push($(el).data('id'));
            }
		}
		if (returnValues.length > 0) {
			return returnValues.length === 1 ? returnValues[0] : returnValues;
		} else {
			return this;
		}
	}

})(jQuery);