(function ($) {
	"use strict";

	/**
	 * All of the code for your admin-facing JavaScript source
	 * should reside in this file.
	 *
	 * Note: It has been assumed you will write jQuery code here, so the
	 * $ function reference has been prepared for usage within the scope
	 * of this function.
	 *
	 * This enables you to define handlers, for when the DOM is ready:
	 *
	 * $(function() {
	 *
	 * });
	 *
	 * When the window is loaded:
	 *
	 * $( window ).load(function() {
	 *
	 * });
	 *
	 * ...and/or other possibilities.
	 *
	 * Ideally, it is not considered best practise to attach more than a
	 * single DOM-ready or window-load handler for a particular page.
	 * Although scripts in the WordPress core, Plugins and Themes may be
	 * practising this, we should strive to set a better example in our own work.
	 */

	jQuery(document).ready(function ($) {
		wooCommerceInitialSliderValues();
		wooCommerceSettingsListener();
	});

	const wooCommerceInitialSliderValues = () => {
		$("#u3dmv_model_exposure_label").text($("#u3dmv_model_exposure").val());
		$("#u3dmv_model_shadow_int_label").text($("#u3dmv_model_shadow_int").val());
		$("#u3dmv_model_shadow_soft_label").text($("#u3dmv_model_shadow_soft").val());
	};

	const wooCommerceSettingsListener = () => {
		$("#u3dmv_model_src_upload").on("click", function (e) {
			e.preventDefault();
			uploadFile("#u3dmv_model_src", "Select 3D Model (.glb/.gltf)", ["application/octet-stream", "model/gltf-binary", "model/gltf+json"]);
		});

		$("#u3dmv_model_src_delete").on("click", function (e) {
			e.preventDefault();
			$("#u3dmv_model_src").val("");
		});

		$("#u3dmv_model_poster_upload").on("click", function (e) {
			e.preventDefault();
			uploadFile("#u3dmv_model_poster", "Select poster image (.jpg, .png)", ["image/jpeg", "image/png"]);
		});

		$("#u3dmv_model_poster_delete").on("click", function (e) {
			e.preventDefault();
			$("#u3dmv_model_poster").val("");
		});

		$("#u3dmv_model_env_upload").on("click", function (e) {
			e.preventDefault();
			uploadFile("#u3dmv_model_env", "Select hdr image (.hdr)", ["image/vnd.radiance", "image/x-radiance", "image/jpeg"]);
		});

		$("#u3dmv_model_env_delete").on("click", function (e) {
			e.preventDefault();
			$("#u3dmv_model_env").val("");
		});

		$("#u3dmv_model_skybox_upload").on("click", function (e) {
			e.preventDefault();
			uploadFile("#u3dmv_model_skybox", "Select jpg or png", ["image/jpeg", "image/png"]);
		});

		$("#u3dmv_model_skybox_delete").on("click", function (e) {
			e.preventDefault();
			$("#u3dmv_model_skybox").val("");
		});

		$("#u3dmv_model_ios_src_upload").on("click", function (e) {
			e.preventDefault();
			uploadFile("#u3dmv_model_ios_src", "Select IOS 3D Model (.usdz)", ["model/vnd.usdz+zip", "application/octet-stream"]);
		});

		$("#u3dmv_model_ios_src_delete").on("click", function (e) {
			e.preventDefault();
			$("#u3dmv_model_ios_src").val("");
		});

		$("#u3dmv_model_exposure").on("input change", function () {
			$("#u3dmv_model_exposure_label").text(this.value);
		});

		$("#u3dmv_model_shadow_int").on("input change", function () {
			$("#u3dmv_model_shadow_int_label").text(this.value);
		});

		$("#u3dmv_model_shadow_soft").on("input change", function () {
			$("#u3dmv_model_shadow_soft_label").text(this.value);
		});
	};

	const uploadFile = (element, title, mimes) => {
		var file_frame = wp.media({
			title: title,
			button: {
				text: "Use this model",
			},
			library: {
				types: mimes,
			},
			multiple: false,
		});

		file_frame.on("select", function () {
			var attachment = file_frame.state().get("selection").first().toJSON();
			$(element).val(attachment.url);
		});

		file_frame.open();
	};
})(jQuery);
