import { Dialog } from 'jodit/src/modules';
import { IJodit } from 'jodit/src/types';

import './multi-image-popup.less';

export const openMultiImagePopup = (
	jodit: IJodit,
	individual: () => void,
	collage: () => void
): void => {
	const dialog = new Dialog({
		resizable: false,
		draggable: false
	});

	const title = jodit.i18n('How to attach images');
	const description = jodit.i18n(
		'You can choose the layout of the attached photos.'
	);
	const individualImageDescription = jodit.i18n('Individual photos');
	const collageImageDescription = jodit.i18n('Collage');

	dialog.setHeader(title).setSize(600, 371);

	const individualImage = require('./images/individual.svg');
	const collageImage = require('./images/collage.svg');

	const dialogContent = jodit.c.fromHTML(
		`<div class="collage-dialog-content">
			<div class="collage-dialog-description">${description}</div>
			<div class="collage-dialog-image-wrapper">
				<div class="collage-dialog-image individual">
				${individualImage}
					<div class="collage-dialog-image-description">${individualImageDescription}</div>
				</div>
				<div class="collage-dialog-image collage">
				${collageImage}
					<div class="collage-dialog-image-description">${collageImageDescription}</div>
				</div>
			</div>
		</div>`
	);

	const collageButton = dialogContent.querySelector(
		'.collage-dialog-image.collage'
	);
	const individualButton = dialogContent.querySelector(
		'.collage-dialog-image.individual'
	);

	collageButton?.addEventListener('click', () => {
		dialog.close();
		collage();
	});

	individualButton?.addEventListener('click', () => {
		dialog.close();
		individual();
	});

	dialog.setContent(dialogContent);

	dialog.open();
};