/* Tooling
/* ========================================================================== */

import { $assign as $, $dispatch, $replaceAll } from 'esri-global-shared';

import esriSearch from 'esri-global-search';

/* Search
/* ========================================================================== */

const prefix = 'esri-header-search';

export default () => {
	/* Search: Control
	/* ====================================================================== */

	const $controlImage = $(
		document.createElementNS('http://www.w3.org/2000/svg', 'svg'),
		{ class: `${prefix}-image`, id: `${prefix}-image` }
	);

	const $control = $('button',
		{
			class: `${prefix}-control`, id: `${prefix}-control`,
			aria: { expanded: false, controls: `${prefix}-content` }
		},
		$controlImage
	);

	$control.addEventListener('click', (event) => {
		$dispatch($control, 'header:click:search', { event });

		$dispatch($control, 'header:menu:toggle', {
			control: $control,
			content: $content,
			state:   'search',
			event
		});
	});

	/* Search: Content
	/* ====================================================================== */

	const $content = $('div', {
		class: `${prefix}-content`, id: `${prefix}-content`,
		aria: { expanded: false, labelledby: `${prefix}-control` }
	});

	/* Search: Target
	/* ====================================================================== */

	const $target = $('div', { class: prefix },
		$control, $content
	);

	/* Search: On Update
	/* ====================================================================== */

	$target.addEventListener('header:update:search', ({ detail }) => {
		$($control, { aria: { label: detail.label } });

		if ('string' === typeof detail.image) {
			$controlImage.removeAttribute('viewBox');

			$replaceAll($controlImage,
				$('use', { 'href': detail.image })
			);
		} else {
			$replaceAll($controlImage,
				...detail.image.map(
					(d) => $(
						document.createElementNS('http://www.w3.org/2000/svg', 'path'),
						{ d }
					)
				)
			);
		}

		if (detail.dialog) {
			detail.dialog.prefix = 'esri-header-search-dialog';

			const $dialog = esriSearch(detail.dialog);

			$($dialog,
				$('button', { class: 'esri-header-search-dialog-cancel' },
					$('span',
						detail.dialog.cancelLabel
					)
				)
			);

			$replaceAll($content,
				$dialog
			);

			$control.addEventListener('click', (event) => {
				if ('true' === $control.getAttribute('aria-expanded')) {
					$dispatch($dialog, `${detail.dialog.prefix}:focus`, { event });
				}
			});
		}
	});

	return $target;
};

@@ -2148,23 +2148,36 @@
 %0A%09%09%09
-$(
+const 
 $dialog
-,%0A%09%09%09%09
+CancelButton = 
 $('b
@@ -2181,25 +2181,29 @@
 ('button', %7B
- 
+%0A%09%09%09%09
 class: 'esri
@@ -2231,21 +2231,42 @@
 -cancel'
- 
+,%0A%09%09%09%09type: 'reset'%0A%09%09%09
 %7D,%0A
-%09
 %09%09%09%09$('s
@@ -2276,17 +2276,16 @@
 ',%0A%09%09%09%09%09
-%09
 detail.d
@@ -2302,32 +2302,278 @@
 elLabel%0A%09%09%09%09
-%09)%0A%09%09%09%09)
+)%0A%09%09%09);%0A%0A%09%09%09$dialogCancelButton.addEventListener('click', (event) =%3E %7B%0A%09%09%09%09$dispatch($control, 'header:menu:close', %7B%0A%09%09%09%09%09control: $control,%0A%09%09%09%09%09content: $content,%0A%09%09%09%09%09state:   'search',%0A%09%09%09%09%09event%0A%09%09%09%09%7D);%0A%09%09%09%7D);%0A%0A%09%09%09$($dialog,%0A%09%09%09%09$dialogCancelButton
 %0A%09%09%09);%0A%0A%09%09%09$

Improve search cancel functionality