/**
 * @package Helix3 Framework
 * @author JoomShaper https://www.joomshaper.com
 * @copyright (c) 2010 - 2021 JoomShaper
 * @license http://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 or Later
 */
jQuery(function ($) {
	$(".sp-image-field").each(function (index, el) {
		var $field = $(el);

		// Upload form
		$field.find(".btn-sp-image-upload").on("click", function (event) {
			event.preventDefault();
			$field.find(".sp-image-upload").click();
		});

		//Upload
		$field.find(".sp-image-upload").on("change", function (e) {
			e.preventDefault();
			var $this = $(this);
			var file = $(this).prop("files")[0];

			var data = new FormData();
			data.append("option", "com_ajax");
			data.append("plugin", "helix3");
			data.append("action", "upload_image");
			data.append("imageonly", false);
			data.append("format", "json");

			if (file.type.match(/image.*/)) {
				data.append("image", file);

				$.ajax({
					type: "POST",
					data: data,
					contentType: false,
					cache: false,
					processData: false,
					beforeSend: function () {
						$this.prop("disabled", true);
						$field.find(".btn-sp-image-upload").attr("disabled", "disabled");
						var loader = $(
							'<div class="sp-image-item-loader"><i class="fa fa-circle-o-notch fa-spin"></i></div>'
						);
						$field.find(".sp-image-upload-wrapper").html(loader);
					},
					success: function (response) {
						var data = $.parseJSON(response);

						if (data.status) {
							$field.find(".sp-image-upload-wrapper").empty().html(data.output);
						} else {
							$field.find(".sp-image-upload-wrapper").empty();
							alert(data.output);
						}

						var $image = $field.find(".sp-image-upload-wrapper").find(">img");

						if ($image.length) {
							$field.find(".btn-sp-image-upload").addClass("hide");
							$field.find(".btn-sp-image-remove").removeClass("hide");
							$field.find(".form-field-spimage").val($image.data("src"));
						} else {
							$field.find(".btn-sp-image-upload").removeClass("hide");
							$field.find(".btn-sp-image-remove").addClass("hide");
							$field.find(".form-field-spimage").val("");
						}

						$this.val("");
						$this.prop("disabled", false);
						$field.find(".btn-sp-image-upload").removeAttr("disabled");
					},
					error: function () {
						$field.find(".sp-image-upload-wrapper").empty();
						$this.val("");
					},
				});
			}

			$this.val("");
		});
	});

	// Delete Image
	$(document).on("click", ".btn-sp-image-remove", function (event) {
		event.preventDefault();

		var $this = $(this);
		var $parent = $this.closest(".sp-image-field");

		if (confirm("You are about to permanently delete this item. 'Cancel' to stop, 'OK' to delete.") == true) {
			var request = {
				option: "com_ajax",
				plugin: "helix3",
				action: "remove_image",
				src: $parent.find(".sp-image-upload-wrapper").find(">img").data("src"),
				format: "json",
			};

			$.ajax({
				type: "POST",
				data: request,
				success: function (response) {
					var data = $.parseJSON(response);
					if (data.status) {
						$parent.find(".sp-image-upload-wrapper").empty();
						$parent.find(".btn-sp-image-upload").removeClass("hide");
						$parent.find(".btn-sp-image-remove").addClass("hide");
						$parent.find(".form-field-spimage").val("");
					} else {
						alert(data.output);
					}
				},
			});
		}
	});
});