var loadModels = async () => {
    await Promise.all([
        faceapi.nets.ssdMobilenetv1.loadFromUri("\\weights\\"),
        faceapi.nets.faceRecognitionNet.loadFromUri("\\weights\\"),
        faceapi.nets.faceLandmark68Net.loadFromUri("\\weights\\")
    ]);
};
loadModels();

$(document).ready(function () {
    
	if ($(window).width() > 992) {
		$('#desktopDisplay').show();
		$('#mobileDisplay').hide();
		$('#mobileDisplay').html('');
	}

	if ($(window).width() <= 992) {
		$('#desktopDisplay').html('');
		$('#desktopDisplay').hide();
		$('#mobileDisplay').show();
	}

	$(document).on('click', '.upload-image1', function () {
		$('.md-modal').addClass('md-show');
		$('.take_snapshot1').show();
		$('.take_snapshot2').hide();
		startCamera();
	});

	$(document).on('click', '.upload-image2', function () {
		$('.md-modal').addClass('md-show');
		$('.take_snapshot1').hide();
		$('.take_snapshot2').show();
		startCamera();
	});

	$(document).on('click', '.camera_close', function () {
		$('.md-modal').removeClass('md-show');
		stopCamera();
	});

    updateSaveButton();
});

//window.onload = async () => {
//    await loadModels();
//    modelsLoaded = true;
//};


var modelsLoaded = false;

//var ensureModelsLoaded = async () => {
//    if (!modelsLoaded) {
//        await loadModels();
//        modelsLoaded = true;
//    }
//};

var updateSaveButton = () => {
	if (!hasErrorPic1 && checkFace1 && !hasErrorPic2 && checkFace2) {
        $('#SaveImageEmployee').removeClass('disable');
    } else {
        $('#SaveImageEmployee').addClass('disable');
    }
};

var runCheckFace1 = async () => {

    const img1 = document.getElementById('pic1');

    const detectionPromise1 = await faceapi.detectAllFaces(img1).withFaceLandmarks().withFaceDescriptors();
    
	if (detectionPromise1.length === 1) {
        console.log('یک چهره در تصویر اول شناسایی شد');

        checkFace1 = true;
        hasErrorPic1 = false;
        $('#demoResult1').css('border', '2px dashed #148b8b');
	} else if (detectionPromise1.length > 1) {
        $('.alert-msg').show();
        $('.alert-msg p').text('بیش از یک چهره در تصویر اول شناسایی شد');
        setTimeout(function () {
            $('.alert-msg').hide();
            $('.alert-msg p').text('');
		}, 4000);

		hasErrorPic1 = true;

        $('#SaveImageEmployee').addClass('disable');
        $('.upload-image1').css('background', '#ff090940');
        $('#demoResult1').css('border', '2px dashed #ff5c5c');
    } else {
        $('.alert-msg').show();
        $('.alert-msg p').text('چهره‌ای در تصویر اول شناسایی نشد');
        setTimeout(function () {
            $('.alert-msg').hide();
            $('.alert-msg p').text('');
        }, 4000);

        hasErrorPic1 = true;

        $('#SaveImageEmployee').addClass('disable');
        $('.upload-image1').css('background', '#ff090940');
        $('#demoResult1').css('border', '2px dashed #ff5c5c');
    }
    updateSaveButton();
	$('#loadingImage1').hide();
};

var runCheckFace2 = async () => {

    const img2 = document.getElementById('pic2');

	const detectionPromise2 = await faceapi.detectAllFaces(img2).withFaceLandmarks().withFaceDescriptors();

	if (detectionPromise2.length === 1) {
		console.log('یک چهره در تصویر دوم شناسایی شد');
        checkFace2 = true;
		hasErrorPic2 = false;
  
        $('#demoResult2').css('border', '2px dashed #148b8b');
	} else if (detectionPromise2.length > 1) {
        $('.alert-msg').show();
        $('.alert-msg p').text('بیش از یک چهره در تصویر دوم شناسایی شد');
        setTimeout(function () {
            $('.alert-msg').hide();
            $('.alert-msg p').text('');
		}, 4000);

        hasErrorPic2 = true;

        $('#SaveImageEmployee').addClass('disable');
        $('.upload-image2').css('background', '#ff090940');
        $('#demoResult2').css('border', '2px dashed #ff5c5c');
    } else {
        $('.alert-msg').show();
        $('.alert-msg p').text('چهره‌ای در تصویر دوم شناسایی نشد');
        setTimeout(function () {
            $('.alert-msg').hide();
            $('.alert-msg p').text('');
        }, 4000);

        hasErrorPic2 = true;

        $('#SaveImageEmployee').addClass('disable');
        $('.upload-image2').css('background', '#ff090940');
        $('#demoResult2').css('border', '2px dashed #ff5c5c');
    }
    updateSaveButton();
	$('#loadingImage2').hide();
};


var FACING_MODES = JslibHtml5CameraPhoto.FACING_MODES;
var IMAGE_TYPES = JslibHtml5CameraPhoto.IMAGE_TYPES;

// Check if videoElement is already declared to avoid redeclaration
// if (typeof videoElement === 'undefined') {
	var videoElement = document.getElementById('videoElement');
	var cameraPhoto = new JslibHtml5CameraPhoto.default(videoElement);
// }

function startCamera() {
	// startCameraMaxResolution
	cameraPhoto.startCamera(FACING_MODES.USER).then(() => {
		console.log('Camera started!');
	}).catch((error) => {
		console.log(error);
		console.error('Camera not started!', error);
	});
}

function stopCamera() {
	cameraPhoto.stopCamera().then(() => {
		console.log('Camera stopped!');
	}).catch((error) => {
		console.log('No camera to stop!:', error);
	});
}

function cropAndResizeImage(base64Str, newWidth, newHeight) {
	return new Promise((resolve) => {
		let img = new Image();
		img.src = base64Str;
		img.onload = () => {
			let canvas = document.createElement('canvas');
			let ctx = canvas.getContext('2d');

			let sideLength = Math.min(img.width, img.height);
			let startX = (img.width - sideLength) / 2;
			let startY = (img.height - sideLength) / 2;

			canvas.width = newWidth;
			canvas.height = newHeight;

			ctx.drawImage(img, startX, startY, sideLength, sideLength, 0, 0, newWidth, newHeight);
			resolve(canvas.toDataURL('image/jpeg'));
		};
	});
}

function take_snapshot1() {
    $('#SaveImageEmployee').addClass('disable');
	var sizeFactor = 1;
	var imageType = IMAGE_TYPES.JPG;
	var imageCompression = 1;

	var config = {
		sizeFactor,
		imageType,
		imageCompression
	};

	var dataUri = cameraPhoto.getDataUri(config);
	cropAndResizeImage(dataUri, 1800, 1800).then((resizedDataUri) => {
		document.getElementById('result1').innerHTML = '<img style="display:none; object-fit: cover;" id="pic1" data-uri="' + resizedDataUri + '" src="' + resizedDataUri + '"/>';
        document.getElementById('demoResult1').innerHTML =
            '<div class="closeImage" onclick="closeImage(\'image1\')">' +
            '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">' +
            '<path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM8.28 7.22a.75.75 0 0 0-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 1 0 1.06 1.06L10 11.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L11.06 10l1.72-1.72a.75.75 0 0 0-1.06-1.06L10 8.94 8.28 7.22Z" clip-rule="evenodd" />' +
            '</svg>' +
            '</div>' +
            '<button type="button" class="upload-image1">' +
            '<p class="textUpload textUploaded">عکس اول</p>' +
            '</button>' +
            '<div class="loadingImage" id="loadingImage1">' +
            '<div class="spinner-border" role="status">' +
            '<span class="visually-hidden">Loading...</span>' +
            '</div>' +
            '</div>' +
			'<img style="width: 100%; height: 100%; border-radius:10px; object-fit: cover;" data-uri="' + resizedDataUri + '" src="' + resizedDataUri + '"/>';
		//document.getElementById('demoResult1').innerHTML = '<div class="closeImage" onclick="closeImage("image1")"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM8.28 7.22a.75.75 0 0 0-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 1 0 1.06 1.06L10 11.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L11.06 10l1.72-1.72a.75.75 0 0 0-1.06-1.06L10 8.94 8.28 7.22Z" clip-rule="evenodd" /></svg></div><button type="button" class="upload-image1"><p class="textUpload textUploaded">عکس اول</p></button><div class="loadingImage" id="loadingImage1"><div class="spinner-border" role="status"><span class="visually-hidden">Loading...</span></div></div><img style="width: 100%; height: 100%; border-radius:10px; object-fit: cover;" data-uri="' + resizedDataUri + '" src="' + resizedDataUri + '"/>';
        $('#loadingImage1').css('display', 'flex');
        runCheckFace1();
	}).catch((error) => {
		console.error('Error cropping and resizing photo:', error);
	});

	$('.md-modal').removeClass('md-show');

	stopCamera();
}

function take_snapshot2() {
    $('#SaveImageEmployee').addClass('disable');
	var sizeFactor = 1;
	var imageType = IMAGE_TYPES.JPG;
	var imageCompression = 1;

	var config = {
		sizeFactor,
		imageType,
		imageCompression
	};

	var dataUri = cameraPhoto.getDataUri(config);
	cropAndResizeImage(dataUri, 1800, 1800).then((resizedDataUri) => {
		document.getElementById('result2').innerHTML = '<img style="display:none; object-fit: cover;"  id="pic2" data-uri="' + resizedDataUri + '" src="' + resizedDataUri + '"/>';
        document.getElementById('demoResult2').innerHTML =
            '<div class="closeImage" onclick="closeImage(\'image2\')">' +
            '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">' +
            '<path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM8.28 7.22a.75.75 0 0 0-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 1 0 1.06 1.06L10 11.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L11.06 10l1.72-1.72a.75.75 0 0 0-1.06-1.06L10 8.94 8.28 7.22Z" clip-rule="evenodd" />' +
            '</svg>' +
            '</div>' +
            '<button type="button" class="upload-image2">' +
            '<p class="textUpload textUploaded">عکس دوم</p>' +
            '</button>' +
            '<div class="loadingImage" id="loadingImage2">' +
            '<div class="spinner-border" role="status">' +
            '<span class="visually-hidden">Loading...</span>' +
            '</div>' +
            '</div>' +
            '<img style="width: 100%; height: 100%; border-radius:10px; object-fit: cover;" data-uri="' + resizedDataUri + '" src="' + resizedDataUri + '"/>';
		//document.getElementById('demoResult2').innerHTML = '<div class="closeImage" onclick="closeImage("image2")"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM8.28 7.22a.75.75 0 0 0-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 1 0 1.06 1.06L10 11.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L11.06 10l1.72-1.72a.75.75 0 0 0-1.06-1.06L10 8.94 8.28 7.22Z" clip-rule="evenodd" /></svg></div><button type="button" class="upload-image2"><p class="textUpload textUploaded">عکس دوم</p></button><div class="loadingImage" id="loadingImage2"><div class="spinner-border" role="status"><span class="visually-hidden">Loading...</span></div></div><img style="width: 100%; height: 100%; border-radius:10px; object-fit: cover;" data-uri="' + resizedDataUri + '" src="' + resizedDataUri + '"/>';
        $('#loadingImage2').css('display', 'flex');
        runCheckFace2();
	}).catch((error) => {
		console.error('Error cropping and resizing photo:', error);
	});

	$('.md-modal').removeClass('md-show');
	stopCamera();
}

function closeImage(type) {
	if (type === "image1") {
        $('#demoResult1').html('');
        $('#demoResult1').html('<button type="button" class="upload-image1"><p class="textUpload">بارگذاری عکس اول</p></button>');
		$('#demoResult1').removeAttr('style');
	} else if (type === "image2") {
        $('#demoResult2').html('');
		$('#demoResult2').html('<button type="button" class="upload-image2"><p class="textUpload">بارگذاری عکس دوم</p></button>');
		$('#demoResult2').removeAttr('style');
    } else {
        $('.alert-msg').show();
        $('.alert-msg p').text('خطایی رخ داده است.');
        setTimeout(function () {
            $('.alert-msg').hide();
            $('.alert-msg p').text('');
        }, 4000);
	}

    $('#SaveImageEmployee').addClass('disable');
}

async function set() {
	let pic1 = $("#pic1").attr('src');
	let pic2 = $("#pic2").attr('src');
	const img1 = document.getElementById('pic1');
	const img2 = document.getElementById('pic2');

	let workshopId = Number($('#workshopId').val());
	let employeeId = Number($('#employeeId').val());

	if (!hasErrorPic1 && checkFace1 && !hasErrorPic2 && checkFace2) {
		const detection1 = await faceapi.detectSingleFace(img1).withFaceLandmarks().withFaceDescriptor();
		const detection2 = await faceapi.detectSingleFace(img2).withFaceLandmarks().withFaceDescriptor();

            console.log(detection1);
		const distance = faceapi.euclideanDistance(detection1.descriptor, detection2.descriptor);
		if (distance > 0.45) {
            $('.alert-msg').show();
            $('.alert-msg p').text('چهره اول با چهره دوم مطابقت ندارد');
            setTimeout(function () {
                $('.alert-msg').hide();
                $('.alert-msg p').text('');
			}, 4000);
            return;

        }
        
		if (pic1 != null && pic2 != null) {
			const loading = $('.spinner-loading-progress').show();
			const loadingBtn = $('.spinner-loading').show();
			let startTime = Date.now();

			$('#SaveImageEmployee').addClass('disable');

			$.ajax({
				type: 'POST',
				url: takePictureAjax,
				data: {
					"base64pic1": pic1,
					"base64pic2": pic2,
					"workshopId": workshopId,
					"employeeId": employeeId
				},
				headers: {
					"RequestVerificationToken": antiForgeryToken
				},
				xhr: function () {
					let xhr = new XMLHttpRequest();
					// Track the progress of the upload
					xhr.upload.onprogress = function (e) {
						if (e.lengthComputable) {
							var percentComplete = (e.loaded / e.total) * 100;
							$('#progressBar').text(Math.round(percentComplete) + '%');
							$('.spinner-loading-progress').css('width', `${Math.round(percentComplete)}%`);
						}
					};
					return xhr;
				},
				success: function (response) {
					let elapsedTime = Date.now() - startTime;
					let delay = Math.max(1000 - elapsedTime, 0); 

					setTimeout(function () {
						if (response.isSuccedded) {
							$('.alert-success-msg').show();
							$('.alert-success-msg p').text(response.message);
							setTimeout(function () {
								$('.alert-success-msg').hide();
								$('.alert-success-msg p').text('');

								$(`#ImageEmployee_${employeeId}`).attr("src", `data:image/jpeg;base64,${response.src}`);
								$(`#ImageEmployeeMobile_${employeeId}`).attr("src", `data:image/jpeg;base64,${response.src}`);
								$(`#TextUpload_${employeeId}`).text("عکس پرسنل آپلود شده است").removeClass('text-danger');
								$(`#TextUploadMobile_${employeeId}`).text("عکس پرسنل آپلود شده است").removeClass('text-danger');

								if (!hasPicture) {
                                    $(`.btnAvticeAction_${employeeId}`)
                                        .removeClass('disable')
                                        .addClass('btn-deactive')
										.attr('id', `togglePersonnelStatus_${response.idRollCall}_desktop`);
									$(`.IsActiveStringFind_${employeeId}`).attr('id', `IsActiveString_${response.idRollCall}_desktop`).text("غیر فعال کردن");
										
									$(`.btnAvticeActionMobile_${employeeId}`)
										.removeClass('disable')
										.addClass('btn-deactive')
										.attr('id', `togglePersonnelStatus_${response.idRollCall}_mobile`);
									$(`.IsActiveStringFindMobile_${employeeId}`).attr('id', `IsActiveString_${response.idRollCall}_mobile`).text("غیر فعال کردن");
                                }

								$(`#uploadMobileBTN_${employeeId}`).text("ویرایش عکس");
								$(`#uploadMobileBTNMobile_${employeeId}`).text("ویرایش عکس");

								$(`#Section_${employeeId}`).removeClass("deactive");
                                $('#SaveImageEmployee').removeClass('disable');
								$('#MainModal').modal('hide');
							}, 1000);
						} else {
                            $('#SaveImageEmployee').removeClass('disable');
							$('.alert-msg').show();
							$('.alert-msg p').text(response.message);
							setTimeout(function () {
								$('.alert-msg').hide();
								$('.alert-msg p').text('');
							}, 3500);
						}
					}, delay); // Delay the hiding of the spinner
				},
				error: function (response) {
					console.log(5, response);
				}
			});
		} else {
			$('.alert-msg').show();
			$('.alert-msg p').text('گرفتن دو عکس الزامیست');
			setTimeout(function () {
				$('.alert-msg').hide();
				$('.alert-msg p').text('');
			}, 3500);
		}
	} else {
		$('.alert-msg').show();
		$('.alert-msg p').text('گرفتن دو عکس الزامیست');
		setTimeout(function () {
			$('.alert-msg').hide();
			$('.alert-msg p').text('');
		}, 3500);
	}
}