namespace folksprak.words.widgets
{
	
	/**
	 */
	export class class_widget_translate extends class_widget
	{
		
		/**
		 */
		private classes : Array<string>;
		
		
		/**
		 */
		public constructor(classes : Array<string> = [])
		{
			super();
			this.classes = classes;
		}
		
		
		/**
		 */
		public render() : HTMLElement
		{
			let dom_div : HTMLDivElement = <HTMLDivElement>(document.createElement('div'));
			let widget_languagechooser_from : class_widget_languagechooser;
			let widget_languagechooser_to : class_widget_languagechooser;
			let dom_token : HTMLInputElement;
			let dom_query : HTMLButtonElement;
			// structure
			{
				dom_div.setAttribute
				(
					'class',
					['widget', 'widget-translate'].concat(this.classes).join(' ')
				);
				{
					widget_languagechooser_from = (new class_widget_languagechooser(['widget-translate-language_from']));
					dom_div.appendChild(widget_languagechooser_from.render());
				}
				{
					widget_languagechooser_to = (new class_widget_languagechooser(['widget-translate-language_to']));
					dom_div.appendChild(widget_languagechooser_to.render());
				}
				{
					dom_token = <HTMLInputElement>(document.createElement('input'));
					dom_token.setAttribute('class', 'widget-translate-token');
					dom_token.setAttribute('type', 'text');
					dom_div.appendChild(dom_token);
				}
				{
					dom_query = document.createElement('button');
					dom_query.setAttribute('class', 'widget-translate-query');
					dom_query.textContent = 'query';
					dom_div.appendChild(dom_query);
				}
				{
					let dom_ul : HTMLUListElement = <HTMLUListElement>(document.createElement('ul'));
					dom_ul.setAttribute('class', 'widget-translate-result');
					dom_div.appendChild(dom_ul);
				}
			}
			// presets
			{
				widget_languagechooser_from.write('eng');
				widget_languagechooser_to.write('flk');
			}
			// logic
			{
				dom_query.addEventListener
				(
					'click',
					async function ()
					{
						const language_from : string = widget_languagechooser_from.read();
						const language_to : string = widget_languagechooser_to.read();
						const token : string = dom_token.value;
						const result : folksprak.words.services.type_translate = await folksprak.words.services.translate
						(
							language_from,
							language_to,
							token
						);
						let dom_ul : HTMLElement = dom_div.querySelector('.widget-translate-result');
						dom_ul.textContent = '';
						for (const entry of result)
						{
							let dom_li : HTMLElement = document.createElement('li');
							let widget_correlation : class_widget_correlation = new class_widget_correlation
							(
								entry.language_from,
								entry.value_from,
								entry.language_to,
								entry.value_to,
							);
							dom_li.appendChild(widget_correlation.render());
							dom_ul.appendChild(dom_li);
						}
					}
				);
			}
			return dom_div;
		}
		
	}
	
}