import { Injectable } from '@angular/core';
import { CropperObj, IDataToCrop, IImageCropperResult } from '@eduswiper/types';
import { spawn } from 'threads';
import { CardCollectionService } from 'libs/card-collection/src/lib/card-collection.service';
import { CropperService } from 'libs/cropper/src/lib/cropper/cropper.service';
import { BehaviorSubject } from 'rxjs';

@Injectable({
	providedIn: 'root',
})
export class CropAllService {
	croppersArray: { cropper: Cropper; id: string }[] = [];
	cropperArray = new BehaviorSubject<{ cropper: Cropper; id: string }[]>(
		this.croppersArray
	);
	cropperArray$ = this.cropperArray.asObservable();

	constructor(
		private cardCollectionService: CardCollectionService,
		private cropperService: CropperService
	) {}

	addCropperToArray(cropperObj: CropperObj) {
		this.croppersArray.push(cropperObj);
		this.cropperArray.next(this.croppersArray);
	}
	removeCropperFromArray(cardId: string) {
		this.croppersArray.forEach((cropperObj) => {
			if (cardId === cropperObj.id) {
				const index = this.croppersArray.indexOf(cropperObj);
				this.croppersArray.splice(index, 1);
				this.cropperArray.next(this.croppersArray);
			}
		});
	}

	async cropToCenter(cropperObj: CropperObj) {
		const imageData = cropperObj.cropper.getImageData();
		const containerData = cropperObj.cropper.getContainerData();
		cropperObj.cropper.reset();

		let ratio: number;

		if (imageData.naturalHeight > imageData.naturalWidth) {
			ratio = containerData.height / imageData.naturalWidth;
		} else {
			ratio = containerData.width / imageData.naturalHeight;
		}
		cropperObj.cropper.zoomTo(ratio);
		type IOnExportCanvas = (
			cropperObj: CropperObj
		) => Promise<IImageCropperResult>;
		const onExportCanvas = await spawn<IOnExportCanvas>(
			new Worker(new URL('on-export-canvas.ts', import.meta.url), {
				type: 'module',
			})
		);
		const data = await onExportCanvas(cropperObj);
		data.editedURL &&
			this.cardCollectionService.changeEditedPhoto(
				cropperObj.id,
				data.editedURL
			);
		this.changeImagesAfterCrop(data, cropperObj.id);
	}
	async cropToFit(cropperObj: CropperObj) {
		cropperObj.cropper.reset();

		type IOnExportCanvas = (
			cropperObj: CropperObj
		) => Promise<IImageCropperResult>;
		const onExportCanvas = await spawn<IOnExportCanvas>(
			new Worker(new URL('on-export-canvas.ts', import.meta.url), {
				type: 'module',
			})
		);
		const data = await onExportCanvas(cropperObj);

		data.editedURL &&
			this.cardCollectionService.changeEditedPhoto(
				cropperObj.id,
				data.editedURL
			);
		this.changeImagesAfterCrop(data, cropperObj.id);
	}

	cropToCenterAll() {
		this.croppersArray.forEach((cropperObj) => {
			this.cropToCenter(cropperObj);
		});
	}

	cropToFitAll() {
		this.croppersArray.forEach((cropperObj) => {
			this.cropToFit(cropperObj);
		});
	}
	initialCrop(cropper: Cropper, id: string) {
		const croppedCard = this.cardCollectionService.currWorkspace.cards.find(
			(card) => card.id === id && card.freshInstance
		);
		if (croppedCard) {
			croppedCard.freshInstance = false;
			this.cropToCenter({ cropper, id });
			this.cardCollectionService.updateCards();
		}
	}

	changeImagesAfterCrop(croppData: IImageCropperResult, id: string) {
		const changeData: IDataToCrop = {
			canvasTop: croppData.canvasData.top,
			canvasLeft: croppData.canvasData.left,
			canvasWidth: croppData.canvasData.width,
			canvasHeight: croppData.canvasData.height,
			imageWidth: croppData.imageData.width,
			imageHeight: croppData.imageData.height,
			imageLeft: croppData.imageData.left,
			imageTop: croppData.imageData.top,
			imageRotate: croppData.imageData.rotate,
		};
		this.cardCollectionService.changePositionImg(changeData, id);
	}
}