import { rawHandler, serialize } from '@wordpress/blocks';

export const walkAndUpdateImageDetails = (inputs, newImage) => {
	const blocks = rawHandler({ HTML: inputs.previousContent });
	const parser = new DOMParser();
	const walk = (blocks) =>
		blocks.map((block) => {
			if (['core/image', 'core/cover'].includes(block.name)) {
				const attrs = { ...block.attributes };
				const url = inputs.url.includes('unsplash.com')
					? inputs.url.split('?')[0] // For unsplash just match the base URL
					: inputs.url;
				const isMatchingId = attrs.id === inputs.imageId;
				const isMatchingUrl = attrs.url.startsWith(url);
				if (!isMatchingId && !isMatchingUrl) {
					// Not our image, return as is
					return { ...block, attributes: attrs };
				}
				attrs.url = newImage.source_url || newImage.url;
				attrs.id = newImage.id;
				// Remove import class if present
				if (attrs.className) {
					attrs.className = attrs.className
						.split(' ')
						.filter((cn) => cn !== 'extendify-image-import')
						.join(' ');
				}
				// originalContent needs wp-image-{id} to match the new ID
				const originalContentDoc = parser.parseFromString(
					attrs.originalContent || block.originalContent || '',
					'text/html',
				);
				const img = originalContentDoc.querySelector('img');
				if (!img) return { ...block, attributes: attrs };
				// cover block wont have an image here
				img.setAttribute('src', newImage.source_url || newImage.url);
				const classList = img.className
					.split(' ')
					.filter((cn) => cn !== `wp-image-${inputs.imageId}`);
				classList.push(`wp-image-${newImage.id}`);
				img.className = classList.join(' ');
				attrs.originalContent = originalContentDoc.body.innerHTML;

				return { ...block, attributes: attrs };
			}
			if (['core/media-text'].includes(block.name)) {
				const attrs = { ...block.attributes };
				const url = inputs.url.includes('unsplash.com')
					? inputs.url.split('?')[0] // For unsplash just match the base URL
					: inputs.url;
				// media-text block may not have all the attributes if the image was external.
				const isMatchingId = attrs?.mediaId === inputs.imageId;
				const isMatchingMediaLink = attrs?.mediaLink?.startsWith(url);
				const isMatchingMediaUrl = attrs?.mediaUrl?.startsWith(url);
				if (!isMatchingId && !isMatchingMediaLink && !isMatchingMediaUrl) {
					// Not our image, return as is
					return { ...block, attributes: attrs };
				}
				attrs.mediaLink = newImage.source_url || newImage.url;
				attrs.mediaUrl = newImage.source_url || newImage.url;
				attrs.mediaId = newImage.id;
				// Remove import class if present
				if (attrs.className) {
					attrs.className = attrs.className
						.split(' ')
						.filter((cn) => cn !== 'extendify-image-import')
						.join(' ');
				}
				return { ...block, attributes: attrs };
			}
			if (block.innerBlocks && block.innerBlocks.length > 0) {
				return {
					...block,
					innerBlocks: walk(block.innerBlocks),
				};
			}
			return block;
		});
	const updatedBlocks = walk(blocks);
	return serialize(updatedBlocks);
};