/*
** Zabbix
** Copyright (C) 2001-2023 Zabbix SIA
**
** This program is free software; you can redistribute it and/or modify
** it under the terms of the GNU General Public License as published by
** the Free Software Foundation; either version 2 of the License, or
** (at your option) any later version.
**
** This program is distributed in the hope that it will be useful,
** but WITHOUT ANY WARRANTY; without even the implied warranty of
** MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
** GNU General Public License for more details.
**
** You should have received a copy of the GNU General Public License
** along with this program; if not, write to the Free Software
** Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
**/


const ZBX_TEXTAREA_COLOR_WIDTH = 96;

(function($) {
	var overlay,
		colorbox,
		input,
		$overlay_input,
		$overlay_colorbox,
		$button_use_default,
		defaults = {
			palette: [
				['FF0000', 'FF0080', 'BF00FF', '4000FF', '0040FF', '0080FF', '00BFFF', '00FFFF', '00FFBF', '00FF00', '80FF00', 'BFFF00', 'FFFF00', 'FFBF00', 'FF8000', 'FF4000', 'CC6600', '666699'],
				['000000', '0F0F0F', '1E1E1E', '2D2D2D', '3C3C3C', '4B4B4B', '5A5A5A', '696969', '787878', '878787', '969696', 'A5A5A5', 'B4B4B4', 'C3C3C3', 'D2D2D2', 'E1E1E1', 'F0F0F0', 'FFFFFF'],
				['FFEBEE', 'FCE4EC', 'F3E5F5', 'EDE7F6', 'E8EAF6', 'E3F2FD', 'E1F5FE', 'E0F7FA', 'E0F2F1', 'E8F5E9', 'F1F8E9', 'F9FBE7', 'FFFDE7', 'FFF8E1', 'FFF3E0', 'FBE9E7', 'EFEBE9', 'ECEFF1'],
				['FFCDD2', 'F8BBD0', 'E1BEE7', 'D1C4E9', 'C5CAE9', 'BBDEFB', 'B3E5FC', 'B2EBF2', 'B2DFDB', 'C8E6C9', 'DCEDC8', 'F0F4C3', 'FFF9C4', 'FFECB3', 'FFE0B2', 'FFCCBC', 'D7CCC8', 'CFD8DC'],
				['EF9A9A', 'F48FB1', 'CE93D8', 'B39DDB', '9FA8DA', '90CAF9', '81D4FA', '80DEEA', '80CBC4', 'A5D6A7', 'C5E1A5', 'E6EE9C', 'FFF59D', 'FFE082', 'FFCC80', 'FFAB91', 'BCAAA4', 'B0BEC5'],
				['E57373', 'F06292', 'BA68C8', '9575CD', '7986CB', '64B5F6', '4FC3F7', '4DD0E1', '4DB6AC', '81C784', 'AED581', 'DCE775', 'FFF176', 'FFD54F', 'FFB74D', 'FF8A65', 'A1887F', '90A4AE'],
				['EF5350', 'EC407A', 'AB47BC', '7E57C2', '5C6BC0', '42A5F5', '29B6F6', '26C6DA', '26A69A', '66BB6A', '9CCC65', 'D4E157', 'FFEE58', 'FFCA28', 'FFA726', 'FF7043', '8D6E63', '78909C'],
				['F44336', 'E91E63', '9C27B0', '673AB7', '3F51B5', '2196F3', '03A9F4', '00BCD4', '009688', '4CAF50', '8BC34A', 'CDDC39', 'FFEB3B', 'FFC107', 'FF9800', 'FF5722', '795548', '607D8B'],
				['E53935', 'D81B60', '8E24AA', '5E35B1', '3949AB', '1E88E5', '039BE5', '00ACC1', '00897B', '43A047', '7CB342', 'C0CA33', 'FDD835', 'FFB300', 'FB8C00', 'F4511E', '6D4C41', '546E7A'],
				['D32F2F', 'C2185B', '7B1FA2', '512DA8', '303F9F', '1976D2', '0288D1', '0097A7', '00796B', '388E3C', '689F38', 'AFB42B', 'FBC02D', 'FFA000', 'F57C00', 'E64A19', '5D4037', '455A64'],
				['C62828', 'AD1457', '6A1B9A', '4527A0', '283593', '1565C0', '0277BD', '00838F', '00695C', '2E7D32', '558B2F', '9E9D24', 'F9A825', 'FF8F00', 'EF6C00', 'D84315', '4E342E', '37474F'],
				['B71C1C', '880E4F', '4A148C', '311B92', '1A237E', '0D47A1', '01579B', '006064', '004D40', '1B5E20', '33691E', '827717', 'F57F17', 'FF6F00', 'E65100', 'BF360C', '3E2723', '263238'],
				['891515', '660A3B', '370F69', '24146D', '131A5E', '093578', '044174', '00484B', '003930', '144618', '264E16', '615911', 'B75F11', 'BF5300', 'AC3C00', '8F2809', '2E1D1A', '1C252A'],
				['5B0E0E', '440727', '250A46', '180D49', '0D113F', '062350', '002B4D', '003032', '002620', '0D2F10', '19340F', '413B0B', '7A3F0B', '7F3700', '732800', '5F1B06', '1F1311', '13191C'],
				['2D0707', '220313', '120523', '0C0624', '06081F', '031128', '001526', '001819', '00131D', '061708', '0C1A07', '201D05', '3D1F05', '3F1B00', '391400', '2F0D03', '0F0908', '090C0E'],
			],
			appendTo: 'body',
			use_default: false,
			onUpdate: null
		},
		/**
		 * Click handler for every colorpicker cell.
		 *
		 * @param {string} color
		 */
		setColorHandler = function (color) {
			methods.set_color(color);
			input.trigger('change');
			methods.hide();
		},

		/**
		 * Set color to the overlay input colorbox.
		 *
		 * @param {string} color
		 */
		setPreviewColor = function (color) {
			color = $.trim(color).toUpperCase();

			if (input.data('use_default') && color.length == 0) {
				$overlay_colorbox
					.css({'background': ''})
					.attr('title', t('Use default'))
					.addClass('use-default')
					.removeClass('use-transparent');
			}
			else if (/^[0-9A-F]{6}$/i.test(color)) {
				$overlay_colorbox
					.css({'background': '#' + color})
					.attr('title', '#' + color)
					.removeClass(['use-default', 'use-transparent']);
			}
			else {
				$overlay_colorbox
					.css({'background': ''})
					.attr('title', t('Use default'))
					.addClass('use-transparent')
					.removeClass('use-default');
			}
		},

		/**
		 * Calculates top and left position for colorpicker overlay element.
		 */
		getOverlayPosition = function(id) {
			var colorbox = $('#lbl_' + id),
				pos = colorbox.offset(),
				dialog = colorbox.closest('.overlay-dialogue'),
				overlay = $('#color_picker'),
				min_outline = 10,
				frame_dims = {
					top: 0,
					left: 0,
					bottom: window.screen.height,
					right: window.screen.width
				},
				left = pos.left + colorbox.outerWidth(),
				top = pos.top;

			// If colorpicker is located in dialog, use dialog as a frame.
			if (overlay.parents('.overlay-dialogue').length) {
				frame_dims.left = dialog.offset().left;
				frame_dims.top = dialog.offset().top;
				frame_dims.bottom = dialog.outerHeight() + frame_dims.top;
				frame_dims.right = dialog.outerWidth() + frame_dims.left;
			}

			// Make sure that overlay is inside frame.
			if (top + overlay.outerHeight() + min_outline > frame_dims.bottom) {
				top = frame_dims.bottom - overlay.outerHeight() - min_outline;
			}

			if (left + overlay.outerWidth() + min_outline > frame_dims.right) {
				left = frame_dims.right - overlay.outerWidth() - min_outline;
			}

			return {
				top: top - frame_dims.top,
				left: left - frame_dims.left
			};
		},
		methods = {
			/**
			 * Initialization of colorpicker overlay.
			 *
			 * @param object         options
			 * @param array          options.palette   Every nested array contains hex color for one cell.
			 * @param string|object  options.appendTo  Target element where overlay should be appended.
			 */
			init: function(options) {

				$overlay_input = $('<input>', {
					type: 'text',
					autofocus: 'autofocus',
					maxlength: 6
				})
					.css('width', ZBX_TEXTAREA_COLOR_WIDTH + 'px')
					.on('input keydown paste', (e) => {
						const color = e.target.value;

						if (color.length == 0 || color.length == 6) {
							setPreviewColor(color);
						}
					})
					.on('keypress', (e) => {
						const color = e.target.value;

						if (e.keyCode == KEY_ENTER && (color.length == 0 || color.length == 6)) {
							setColorHandler(e.target.value);
						}
					});

				const $close = $('<button>', {
					type: 'button',
					class: 'btn-overlay-close',
					title: t('S_CLOSE')
				})
					.on('click', (e) => {
						let color = $overlay_input.val();
						if (color.length == 0 || color.length == 6) {
							setColorHandler(color);
						}
						else {
							methods.hide();
						}
					});

				$overlay_colorbox = $('<div>', {
					class: 'color-picker-preview',
					'data-use-default': t('D')
				});

				$button_use_default = $('<button>', {
					type: 'button',
					class: 'btn-alt',
					title: t('Use default'),
					'aria-label': t('Use default')
				})
					.html(t('Use default'))
					.on('click', () => setColorHandler(''));

				overlay = $('<div>', {
					class: 'overlay-dialogue color-picker-dialogue',
					id: 'color_picker'
				})
					.append($close)
					.append($('<div>').append([
						$('<div>', {class: 'color-picker-input'}).append([$overlay_colorbox, $overlay_input]),
						$button_use_default
					]))
					.append(
						$.map(options.palette, (colors) => {
							return $('<div>').append(
								$.map(colors, (color) => {
									return $('<button>', {'title': '#' + color, type: 'button', 'data-color': color})
										.css('background', '#' + color)
								})
							);
						})
					)
					.on('click', '[data-color]', function () {
						setColorHandler($(this).data('color'));
					});

				overlay.appendTo($(options.appendTo));

				methods.hide();
			},

			destroy: function(element) {
				const id = $(element).attr('id');

				if ($('#lbl_' + id).length == 0) {
					return;
				}

				element.next().remove();

				$(element)
					.off('change')
					.data('use_default', null);
			},

			/**
			 * Hide colorpicker overlay.
			 */
			hide: function() {
				colorbox = null;
				input = null;

				overlay.css({
					'zIndex': 1000,
					'display': 'none',
					'left': '-' + (overlay.width() ? overlay.width() : 100) + 'px'
				});

				removeFromOverlaysStack('color_picker');
			},
			/**
			 * Show colorpicker for specific element.
			 *
			 * @param string id      Id of input element which will be associated with opened colorpicker instance.
			 * @param object target  jQuery element (colorbox) which triggered show action.
			 */
			show: function(id, target) {
				this.hide();

				input = $('#' + id);
				colorbox = $('#lbl_' + id);

				if (input.is(':disabled,[readonly]')) {
					return;
				}

				const pos = getOverlayPosition(id);

				overlay.css({
					'left': pos.left + 'px',
					'top': pos.top + 'px',
					'display': 'block'
				});

				if (input.data('use_default')) {
					$button_use_default.show();
				}
				else {
					$button_use_default.hide();
				}

				$overlay_input.val(input.val());

				setPreviewColor(input.val());

				addToOverlaysStack('color_picker', target, 'color_picker');

				Overlay.prototype.recoverFocus.call({'$dialogue': overlay});
				Overlay.prototype.containFocus.call({'$dialogue': overlay});
			},
			/**
			 * Set color as background color value of colorbox and as value for input.
			 *
			 * @param string color    Desired hex color.
			 */
			set_color: function(color) {
				color = $.trim(color).toUpperCase();

				if (input.data('use_default') && color.length == 0) {
					colorbox
						.css({'background': ''})
						.attr('title', t('Use default'))
						.addClass('use-default')
						.removeClass('use-transparent');
				}
				else if (/^[0-9A-F]{6}$/i.test(color)) {
					colorbox
						.css({'background': '#' + color})
						.attr('title', '#' + color)
						.removeClass(['use-default', 'use-transparent']);
				}
				else {
					colorbox
						.css({'background': ''})
						.attr('title', t('Use default'))
						.addClass('use-transparent')
						.removeClass('use-default');
				}

				input.val(color);
			},
			/**
			 * Set desired color to input element and colorbox associated with input element.
			 *
			 * @param string id       Id of input element.
			 * @param string color    Hex color value.
			 */
			set_color_by_id: function(id, color) {
				colorbox = $('#lbl_' + id);
				input = $('#' + id);
				methods.set_color(color);
			}
		};

	$.colorpicker = function(method) {
		if (methods[method]) {
			if (!overlay) {
				methods.init();
			}

			return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
		}
		else if (typeof method === 'object' || !method) {
			return methods.init.apply(this, arguments);
		}
		else {
			$.error('Invalid method "' +  method + '".');
		}
	}

	$.fn.colorpicker = function(options) {
		options = $.extend({}, defaults, options || {});

		/**
		 * Initialize colorpicker overlay if it is not initialized.
		 */
		if (!overlay || !$('#color_picker').length) {
			methods.init(options);
		}

		/*
		 * Initialization of each separate colorpicker element.
		 *
		 * @param {object}    options
		 * @param {bool}      options.use_default  Target element where overlay should be appended.
		 * @param {callable}  options.onUpdate     Callback function to execute once color has changed.
		 */
		return this.each(function (_, element) {
			const id = element.id;

			if ($('#lbl_' + id).length) {
				return;
			}

			$('<button>', {
				id: 'lbl_' + id,
				type: 'button',
				class: 'color-picker-preview',
				title: element.value ? '#' + element.value : '',
				'data-use-default': t('D')
			})
				.on('keydown', function (e) {
					if (e.keyCode == KEY_ENTER || e.keyCode == KEY_SPACE) {
						e.preventDefault();
						methods.show(element.id, e.target);
					}
				})
				.on('click', function (e) {
					methods.show(element.id, e.target);
				})
				.insertAfter(element);

			$(element)
				.data('use_default', options.use_default)
				.change(function () {
					methods.set_color_by_id(element.id, this.value);
					if (options.onUpdate !== null) {
						options.onUpdate.call(element, this.value);
					}
				});

			methods.set_color_by_id(id, element.value);
		});
	}
})(jQuery);