// Jodit
import type { IJodit } from 'jodit/types';

// Style
import './unsplash.less';
import { Basic } from 'unsplash-js/dist/methods/users/types';
import { unsplashApi } from 'jodit/src/modules/widget/search-selector/ImageMediaList';

// Main Section

interface MediaSource {
	url: string;
	width: number;
	height: number;
}
export class MediaItem {
	element: HTMLElement;

	constructor(
		editor: IJodit,
		imageThumb: MediaSource,
		image?: string,
		alt?: string | null,
		close?: () => void,
		user?: Basic,
		downloadUrl?: string
	) {
		this.element = editor.c.fromHTML(
			`<div class="jodit-media-item masonry-item hover-border-effect skeleton-loader">
					<img class="" src="${imageThumb?.url}"/>
          ${
				user
					? `<div class="unsplash-attribute"><a href="https://unsplash.com/@${user?.username}?utm_source=superclub-editor&utm_medium=referral">${user?.username}</a></div>`
					: ''
			}
			</div>`
		);
		this.element.style.gridRowEnd = `span ${Math.ceil(
			(imageThumb.height * 114) / imageThumb.width / 10
		)}`;
		this.element.style.marginBottom = '4px';

		// const img = this.element.querySelector('img');
		// if (img) {
		// 	img.style.height = `${imageThumb.height}px`;
		// 	img.style.width = `${imageThumb.width}`;
		// }
		// this.element.appendChild(
		// 	editor.c.fromHTML(
		// 		``
		// 	)
		// );
		// imageDom.style.height = `${
		// 	(imageThumb.height * 114) / imageThumb.width
		// }px`;
		// this.element.firstChild?.appendChild(imageDom);

		// const masonry = document.querySelector('.masonry');
		// if (masonry) {
		// 	// const masonryContainerStyle = getComputedStyle(masonry);
		// 	// const columnGap = parseInt(
		// 	// 	masonryContainerStyle.getPropertyValue('column-gap')
		// 	// );
		// 	// document.querySelectorAll('.masonry-item').forEach(elm => {
		// 	// 	const htmlElm = elm as HTMLElement;

		// 	// 	const gridRowEnd = `span ${Math.ceil(htmlElm.offsetHeight)}`;
		// 	// 	console.log(gridRowEnd);
		// 	// 	htmlElm.style.gridRowEnd = gridRowEnd;
		// 	// });
		// }

		this.element.addEventListener('click', () => {
			// const elm = j.createInside.element(tagName);
			const img = editor.c.fromHTML(
				`<p><img style="width: ${
					editor.o.imageDefaultWidth || '100%'
				}px;" src="${image}" alt="${alt}"/></p>
        ${
			user
				? `<p>
          Photo By <a href="https://unsplash.com/@${user?.username}?utm_source=superclub-editor&utm_medium=referral">${user?.username}</a> On <a href="https://unsplash.com?utm_source=superclub-editor&utm_medium=referral">Unsplash</a>
        </p>`
				: ''
		}
        <p></p>`
			);
			// const img = editor.c.fromHTML(
			// 	`<p><img style="width: ${
			// 		editor.o.imageDefaultWidth || '100%'
			// 	}px;" src="${image}" alt="${alt}"/></p><p></p>`
			// );
			editor.s.insertHTML(img);

			unsplashApi.photos.trackDownload({
				downloadLocation: `${downloadUrl}&client_id=1xrBCfio58yQDy39-MQxsm8_ZG1nSacRlmfI0bcIKK0`
			});

			if (close) close();
		});
	}
}