import type { Directive, DirectiveBinding } from 'vue';
import { useImagePreview } from '../utils/imagePreview';

const { previewSingleImage } = useImagePreview();

export const previewDirective: Directive = {
	mounted(el: HTMLElement, binding: DirectiveBinding) {
		const imgEl = el.tagName === 'IMG' ? el : el.querySelector('img');
		if (!imgEl) return;

		const urlList = binding.value?.urlList || [];
		const disabled = binding.value?.disabled || false;

		if (!disabled) {
			imgEl.style.cursor = 'pointer';
			imgEl.addEventListener('click', (e) => {
				e.stopPropagation();
				const src = (imgEl as HTMLImageElement).src;
				if (urlList.length > 0) {
					const { showImagePreview } = useImagePreview();
					const index = urlList.indexOf(src);
					showImagePreview({
						urlList,
						initialIndex: index >= 0 ? index : 0,
					});
				} else {
					previewSingleImage(src);
				}
			});
		}
	},

	unmounted(el: HTMLElement) {
		const imgEl = el.tagName === 'IMG' ? el : el.querySelector('img');
		if (!imgEl) return;
		imgEl.removeEventListener('click', () => {});
	},
};

export default previewDirective;