namespace _zeitbild.frontend_web.widgets.sources
{
	
	/**
	 */
	type type_entry = {
		id : _zeitbild.frontend_web.type.calendar_id;
		name : string;
		access_level : _zeitbild.frontend_web.type.enum_access_level;
	};
	
	
	/**
	 */
	export class class_widget_sources extends _zeitbild.class_widget
	{
		
		/**
		 */
		private keys : Array<string>;
		
		
		/**
		 */
		private data : Record<string, type_entry>;
		
		
		/**
		 */
		private action_open : ((entry : type_entry) => void);
		
		
		/**
		 */
		private action_toggle_visibility : ((entry : type_entry) => void);
		
		
		/**
		 */
		public constructor(
			entries : Array<type_entry>,
			options : {
				action_open ?: ((entry : type_entry) => void);
				action_toggle_visibility ?: ((entry : type_entry) => void);
			} = {}
		)
		{
			options = Object.assign(
				{
					"action_open": (calendar_id) => {},
					"action_toggle_visibility": (calendar_id) => {},
				},
				options
			);
			super();
			this.keys = [];
			this.data = {};
			entries.forEach(
				(entry) => {
					const key : string = entry.id.toFixed(0);
					this.keys.push(key);
					this.data[key] = entry;
				}
			);
			this.action_open = options.action_open;
			this.action_toggle_visibility = options.action_toggle_visibility;
		}
		
		
		/**
		 * [implementation]
		 */
		public async load(
			target_element : Element
		) : Promise<void>
		{
			target_element.innerHTML = await _zeitbild.frontend_web.helpers.template_coin(
				"widget-sources",
				"main",
				{
					"entries": (
						(
							await _zeitbild.frontend_web.helpers.promise_row<string>(
								this.keys
								.map(
									(key) => () => {
										const entry : type_entry = this.data[key];
										return _zeitbild.frontend_web.helpers.template_coin(
											"widget-sources",
											"entry",
											{
												"name": entry.name,
												"label_toggle": lib_plankton.string.coin(
													"{{show}}/{{hide}}",
													{
														"show": lib_plankton.translate.get("common.show"),
														"hide": lib_plankton.translate.get("common.hide"),
													}
												),
												"label_edit": lib_plankton.translate.get("common.edit"),
												// "access_level": entry.access_level, // TODO
												// TODO centralize
												"color_head": lib_plankton.color.output_hex(
													lib_plankton.color.give_generic(
														(entry.id - 1),
														{
															"saturation": 0.375,
															"value": 0.375,
														}
													),
												),
												"color_body": lib_plankton.color.output_hex(
													lib_plankton.color.give_generic(
														(entry.id - 1),
														{
															"saturation": 0.375,
															"value": 0.25,
														}
													),
												),
												"rel": key,
											}
										);
									}
								)
							)
						)
						.join("")
					),
				}
			);
			target_element.querySelectorAll(".sources-entry-head").forEach(
				(element) => {
					element.addEventListener(
						"click",
						(event) => {
							element.parentElement.classList.toggle("sources-entry-open");
						}
					);
				}
			);
			target_element.querySelectorAll(".sources-entry-toggle").forEach(
				(element) => {
					element.addEventListener(
						"click",
						() => {
							const key : string = element.parentElement.parentElement.parentElement.getAttribute("rel");
							const entry : type_entry = this.data[key];
							element.parentElement.parentElement.parentElement.classList.toggle("sources-entry-hidden");
							element.parentElement.parentElement.parentElement.classList.toggle("sources-entry-open", false);
							this.action_toggle_visibility(entry);
						}
					);
				}
			);
			target_element.querySelectorAll(".sources-entry-edit").forEach(
				(element) => {
					element.addEventListener(
						"click",
						(event) => {
							const key : string = element.parentElement.parentElement.parentElement.getAttribute("rel");
							const entry : type_entry = this.data[key];
							this.action_open(entry);
						}
					);
				}
			);
			return Promise.resolve<void>(undefined);
		}
			
	}
	
}