import { ArtBrowser } from "../apps/ArtBrowser.mjs";

/*
This hook handles adding the button for selecting an image using this module
into the prototype token config and the token-specific config. Handling all of
the relevant locations in both apps with a single hook.
*/
Hooks.on(`renderTokenApplication`, (app, form) => {
	const button = document.createElement(`button`);
	button.type = `button`;
	button.classList = `icon fa-solid fa-paintbrush`;

	/** @type {HTMLElement | undefined} */
	const textureSource = form.querySelector(`file-picker[name="texture.src"]`);
	if (textureSource) {
		const cloned = button.cloneNode(true);
		cloned.addEventListener(`click`, async () => {
			const src = await ArtBrowser.select(1);
			if (!src) return
			textureSource.value = src;
		});
		textureSource.insertAdjacentElement(`afterend`, cloned);
	};

	/** @type {HTMLElement | undefined} */
	const turnMarkerSource = form.querySelector(`file-picker[name="turnMarker.src"]`);
	if (turnMarkerSource) {
		const cloned = button.cloneNode(true);
		cloned.disabled = turnMarkerSource.disabled;
		cloned.addEventListener(`click`, async () => {
			const src = await ArtBrowser.select(1);
			if (!src) return
			turnMarkerSource.value = src;
		});

		// Ensure that the disabled state stays in sync
		const observer = new MutationObserver(() => {
			cloned.disabled = turnMarkerSource.disabled;
		});
		observer.observe(turnMarkerSource, { attributeFilter: [`disabled`] });

		turnMarkerSource.insertAdjacentElement(`afterend`, cloned);
	};
});