import { Plugin } from 'jodit/src/modules';
import { pluginSystem } from 'jodit/src/core/global';
import { IJodit } from 'jodit/src/types';
import { $$ } from 'jodit/src/core/helpers';

import './config';

enum MEDIA_TYPE {
	IMG = 'IMAGE',
	VIDEO = 'VIDEO',
	'JODIT-COLLAGE-ITEM' = 'IMAGE'
}

export class SourceMediaModalHandler extends Plugin {
	private getMediaElementList(): Array<HTMLImageElement | HTMLVideoElement> {
		return $$(this.j.o.sourceMediaModalTags.join(','), this.j.editor);
	}

	private getMediaList(): Array<{ type: MEDIA_TYPE; url: string }> {
		const mediaElementList = this.getMediaElementList();
		return mediaElementList.map(el => ({
			type: MEDIA_TYPE[el.tagName as keyof typeof MEDIA_TYPE],
			url: el.getAttribute('src') ?? ''
		}));
	}

	private mediaEventHandler(index: number, isVideo: boolean): void {
		if (isVideo) return;

		const mediaList = this.getMediaList();
		this.j.o.onClickMedia(index, mediaList);
	}

	/** @override */
	protected afterInit(editor: IJodit): void {
		if (!this.j.o.readonly) return;
		this.getMediaElementList().forEach((element, index) => {
			element.addEventListener('click', () => {
				const isVideo = element.tagName === 'VIDEO';
				this.mediaEventHandler(index, isVideo);
			});
		});
	}

	/** @override */
	protected beforeDestruct(editor: IJodit): void {
		if (!this.j.o.readonly) return;
	}
}

pluginSystem.add('source-media-modal-handler', SourceMediaModalHandler);