/**
 * This file contains the functions needed for the inline edit and show answers.
 *
 * @since 1.0.0
 * @output assets/js/questions.js
 */

window.wp = window.wp || {};

/**
 * Manages the quick edit and bulk edit windows for editing posts or pages.
 *
 * @namespace questionBank
 *
 * @since 1.0.0
 *
 * @type {Object}
 *
 * @property {string} type The type of inline editor.
 * @property {string} what The prefix before the post ID.
 *
 */
(
	function ($, wp) {
		// Store current screen data.
		window._inlineEditQuestion = {
			postId: 0,
			editRowId: 0,
		};

		window.questionBank = {
			/**
			 * Snackbar notice.
			 */
			snackbarNotice: function (message) {
				var _t = this;
				$(".stlms-snackbar-notice").find("p").html(message);
				$(".stlms-snackbar-notice").toggleClass("open", 1000);
				if ($(".stlms-snackbar-notice").hasClass("open")) {
					setTimeout(function () {
						_t.snackbarNotice("");
					}, 3000);
				}
			},
			inlineEditQuestion: function () {
				// we create a copy of the WP inline edit post function
				if ("undefined" !== typeof inlineEditPost) {
					var $wp_inline_edit = inlineEditPost.edit;

					// and then we overwrite the function with our own code
					inlineEditPost.edit = function (id) {
						// "call" the original WP edit function
						// we don't want to leave WordPress hanging

						$wp_inline_edit.apply(this, arguments);

						// now we take care of our business

						// get the post ID
						var $post_id = 0;
						if (typeof id == "object") {
							$post_id = parseInt(this.getId(id));
						}

						if ($post_id > 0) {
							// define the edit row
							var $edit_row = $("#edit-" + $post_id);
							var $post_row = $("#post-" + $post_id);

							// get the data
							var $levels = $(".column-levels", $post_row).text();
							// populate the data
							$(".inline-edit-levels select", $edit_row).val(
								$levels?.toLowerCase(),
							);
						}
					};
					$(document).on("click", ".show_answer a", function () {
						var t = inlineEditPost,
							q = questionBank;
						var $this = $(this).parents("tr");
						var id = t.getId($this);
						var editData = $(this).data("inline_edit");
						var type = editData?.type;
						q.hideAnswers();
						window._inlineEditQuestion = {
							postId: id,
							editRowId: t.what + id,
						};
						$(this).attr("aria-expanded", "true");

						// Add the new edit row with an extra blank row underneath to maintain zebra striping.
						var editRow = $("#inline-edit").clone(true);
						var showAnswerHtml = $("#show_answer").html();
						editRow.html(showAnswerHtml);

						$("td", editRow).attr(
							"colspan",
							$("th:visible, td:visible", ".widefat:first thead")
								.length,
						);

						// Remove the ID from the copied row and let the `for` attribute reference the hidden ID.
						$("td", editRow)
							.find("#quick-edit-legend")
							.removeAttr("id");
						$("td", editRow)
							.find('p[id^="quick-edit-"]')
							.removeAttr("id");

						$(t.what + id)
							.removeClass("is-expanded")
							.hide()
							.after(editRow)
							.after('<tr class="hidden"></tr>');

						// Set inline edit data.
						$('input[name="post_title"]', editRow).val(
							editData?.title,
						);
						$("select#stlms_answer_type", editRow).val(
							editData?.type,
						);
						$(".marks-input input", editRow).val(editData?.marks);
						$('input[name="_status"]', editRow).val(
							editData?.status,
						);

						if (editData[type]) {
							var optionList = $(
								".stlms-options-table__body .stlms-options-table__list-wrap",
								$("#" + type),
							);
							optionList.empty();
							$.each(editData[type], function (n, i) {
								var optionListTpl = $(
									"#" + type + "_option",
								).html();
								optionListTpl = optionListTpl.replace(
									"{{VALUE}}",
									i.option,
								);
								optionListTpl = optionListTpl.replace(
									"{{checked}}",
									i.checked ? "checked" : "",
								);
								optionListTpl = optionListTpl.replace(
									"{{ANSWER_ID}}",
									n,
								);
								optionListTpl = optionListTpl.replace(
									"{{OPTION_NO}}",
									questionObject.alphabets[n] ?? "",
								);
								$(optionListTpl).appendTo(optionList);
							});
							$("#" + type).removeClass("hidden");
						} else if ("fill_blank" === type) {
							var mandatoryTpl = $(
								"#fill_blank_mandatory",
							).html();
							mandatoryTpl = mandatoryTpl.replace(
								"{{VALUE}}",
								editData?.mandatory,
							);
							$("ul", "#" + type).empty();
							$("ul", "#" + type).append(mandatoryTpl);
							$.each(editData?.optional, function (i, optional) {
								var optionalTpl = $(
									"#fill_blank_optional",
								).html();
								optionalTpl = optionalTpl.replace(
									"{{VALUE}}",
									optional,
								);
								$(optionalTpl).appendTo($("ul", "#" + type));
							});
							$("#" + type).removeClass("hidden");
						}

						// Trigger select type dropdown.
						$("#stlms_answer_type").change();

						// Show edit row.
						$(editRow)
							.attr("id", "edit-" + id)
							.addClass("inline-editor")
							.show();
						q.initSortable(q);
					});

					// Hide answer box.
					$(document).on(
						"click",
						".stlms-cancel-answer",
						this.hideAnswers,
					);
				}
			},

			/**
			 * Initializes the inline editor.
			 */
			init: function () {
				var _this = this;
				_this.inlineEditQuestion();
				_this.initSortable(_this);
				_this.dialogInit();

				// Show / Hide answers.
				$(document).on("change", "#stlms_answer_type", function () {
					var type = $(this).val();
					if ("true_or_false" === type) {
						$(
							".stlms-add-option, .stlms-show-ans-action .stlms-add-answer",
						).addClass("hidden");
					} else {
						$(
							".stlms-add-option, .stlms-show-ans-action .stlms-add-answer",
						).removeClass("hidden");
					}
					$(
						".stlms-answer-group, .inline-edit-col-left .stlms-options-table, .inline-edit-col-left .stlms-add-accepted-answers",
					).addClass("hidden");
					$("#" + type).removeClass("hidden");
				});
				$("#stlms_answer_type").change();

				// Inline quick edit.
				$(document).on(
					"click",
					".post-type-stlms_question .button-link.editinline",
					function () {
						$(".inline-edit-private")
							.parents("div.inline-edit-group")
							.remove();
						var rightCustomBox = jQuery(
							".inline-edit-col-right:not(.inline-edit-levels):visible",
						);
						var selectedStatus = jQuery(
							"select",
							rightCustomBox,
						).val();
						jQuery(" > *", rightCustomBox).appendTo(
							".inline-edit-col-left:visible",
						);
						jQuery(
							'.inline-edit-col-left:visible select[name="_status"]',
						).val(selectedStatus);
					},
				);
				// Remove answer.
				$(document).on(
					"click",
					".stlms-remove-answer",
					this.removeAnswer,
				);
				// Add new answer.
				$(document).on("click", ".stlms-add-answer", this.addNewAnswer);
				// Save inline edit.
				$(document).on(
					"click",
					".stlms-save-answer",
					this.saveInlineEdit,
				);

				const tabs = document.querySelectorAll(".stlms-tab");
				const tabContents =
					document.querySelectorAll(".stlms-tab-content");

				tabs.forEach((tab) => {
					tab.addEventListener("click", function () {
						const tabId = this.getAttribute("data-tab");

						// Hide all tab contents
						tabContents.forEach((content) => {
							content.classList.remove("active");
						});

						// Remove active class from all tabs
						tabs.forEach((t) => {
							t.classList.remove("active");
						});

						// Show the corresponding tab content with fade effect
						const tabContent = document.querySelector(
							`.stlms-tab-content[data-tab="${tabId}"]`,
						);
						if (tabContent) {
							tabContent.classList.add("active");
						}
						// Add active class to clicked tab
						this.classList.add("active");
					});
				});
			},

			/**
			 * Init sortable.
			 */
			initSortable: function (obj) {
				var _this = obj;
				$(".stlms-sortable-answers", document)
					.sortable({
						appendTo: "parent",
						axis: "y",
						containment: "parent",
						items: "ul.stlms-options-table__list",
						placeholder: "sortable-placeholder",
						forcePlaceholderSize: true,
						stop: function () {
							_this.reorderAnswer();
						},
					})
					.disableSelection();
			},

			/**
			 * Hide answers.
			 */
			hideAnswers: function () {
				// Hide previous opned inline editor.
				$(".inline-editor").prev().prev("tr").show();
				$(".inline-editor").prev("tr.hidden").remove();
				$(".inline-editor").remove();
			},

			/**
			 * Remove answer.
			 */
			removeAnswer: function (e) {
				e.preventDefault();
				var parentElement = $(this).parents(
					".stlms-options-table__list-wrap",
				);
				$(this).parents("ul.stlms-options-table__list").remove();
				if (
					1 ===
					$("ul.stlms-options-table__list", parentElement).length
				) {
					$("ul.stlms-options-table__list", parentElement)
						.find(".stlms-remove-answer")
						.addClass("hidden");
				}
				questionBank.reorderAnswer();
			},

			/**
			 * Reorder answer.
			 */
			reorderAnswer: function () {
				$(
					".stlms-sortable-answers .stlms-options-table__list-wrap .stlms-options-table__list:visible",
				).each(function (index, item) {
					var AnsId = questionObject.alphabets[index];
					$(item)
						.find(".stlms-options-no")
						.text(AnsId + ".");
					$(item).find(".stlms-option-check-td input").val(index);
				});
			},

			/**
			 * Add new answer.
			 */
			addNewAnswer: function () {
				var parentElement = $(this).parents(
					".stlms-answer-wrap, .stlms-show-ans-wrap",
				);
				var lastItem = $(
					"ul.stlms-options-table__list:visible:last, .stlms-add-accepted-answers li:visible:last",
					parentElement,
				);
				var newItem = lastItem.clone();
				newItem.find("input").val("").removeAttr("value");
				newItem
					.find("input:checkbox, input:radio")
					.prop("checked", false)
					.removeAttr("checked");
				$(newItem).insertAfter(lastItem);
				// Show delete button.
				$("ul.stlms-options-table__list", parentElement)
					.find(".stlms-remove-answer")
					.removeClass("hidden");
				questionBank.reorderAnswer();
			},

			/**
			 * Save inline edit answers.
			 */
			saveInlineEdit: function () {
				var _this = $(this);
				var params,
					fields,
					page = $(".post_status_page").val() || "";
				var id = window._inlineEditQuestion.postId;

				$("table.widefat .spinner").addClass("is-active");
				_this.attr("disabled", true);

				params = {
					action: "inline-save",
					post_type: typenow,
					post_ID: id,
					edit_date: "",
					post_status: page,
					stlms_nonce: questionObject.nonce
				};

				fields = $("#edit-" + id)
					.find(":input")
					.serialize();
				params = fields + "&" + $.param(params);

				// Make Ajax request.
				$.post(
					ajaxurl,
					params,
					function (r) {
						var $errorNotice = $(
								"#edit-" +
									id +
									" .inline-edit-save .notice-error",
							),
							$error = $errorNotice.find(".error");

						$("table.widefat .spinner").removeClass("is-active");

						if (r) {
							if (-1 !== r.indexOf("<tr")) {
								$(window._inlineEditQuestion.editRowId)
									.siblings("tr.hidden")
									.addBack()
									.remove();
								$("#edit-" + id)
									.before(r)
									.remove();
								$(window._inlineEditQuestion.editRowId)
									.hide()
									.fadeIn(400, function () {
										// Move focus back to the Quick Edit button. $( this ) is the row being animated.
										$(this)
											.find("[data-inline_edit]")
											.attr("aria-expanded", "false")
											.trigger("focus");
										wp.a11y.speak(
											wp.i18n.__("Changes saved."),
										);
									});
							} else {
								r = r.replace(/<.[^<>]*?>/g, "");
								$errorNotice.removeClass("hidden");
								$error.html(r);
								wp.a11y.speak($error.text());
							}
						} else {
							$errorNotice.removeClass("hidden");
							$error.text(
								wp.i18n.__("Error while saving the changes."),
							);
							wp.a11y.speak(
								wp.i18n.__("Error while saving the changes."),
							);
						}
					},
					"html",
				);

				// Prevent submitting the form when pressing Enter on a focused field.
				return false;
			},

			/**
			 * Dialog box.
			 */
			dialogInit: function () {
				$("#assign_quiz").dialog({
					title: questionObject.i18n.PopupTitle,
					dialogClass: "wp-dialog stlms-modal",
					autoOpen: false,
					draggable: false,
					width: "auto",
					modal: true,
					resizable: false,
					closeOnEscape: true,
					position: {
						my: "center",
						at: "center",
						of: window,
					},
					open: function (event, ui) {
						$('#assign_quiz').load(
							questionObject.contentLoadUrl + ' #assign_quiz > *',
							{
								fetch_quizzes: 1,
								post_id: $('#post_ID').val()
							},
							function () {
								$('.stlms-choose-quiz').trigger('change');
							}
						);
					},
					create: function () {},
				});

				$(document).on(
					"click",
					'[data-modal="assign_quiz"]',
					function (e) {
						e.preventDefault();
						$("#assign_quiz").dialog("open");
					},
				);

				$(document).on("change", ".stlms-choose-quiz", function () {
					var totalChecked = $(
						"input:checkbox:checked",
						$(this).parents("ul"),
					);
					$(this)
						.parents(".stlms-qus-bank-modal")
						.find(".stlms-add-quiz")
						.attr("disabled", function () {
							return false;
						})
						.next(".stlms-qus-selected")
						.text(function (i, txt) {
							return txt.replace(/\d+/, totalChecked.length);
						});
				});

				$(document).on("click", ".stlms-add-quiz", function (e) {
					var _btn = $(this);
					var qIds = $(".stlms-choose-quiz:checked")
						.map(function () {
							return $(this).val();
						})
						.get();
					var postId = $("#post_ID").val();

					$(".stlms-choose-quiz:visible").attr("disabled", true);
					_btn.parent("div")
						.find("span.spinner")
						.addClass("is-active")
						.parent("div")
						.find("button")
						.attr("disabled", true);

					$.post(
						questionObject.ajaxurl,
						{
							action: "stlms_assign_to_quiz",
							stlms_nonce: questionObject.nonce,
							selected: qIds,
							post_id: postId,
						},
						function (data) {
							$(".stlms-choose-quiz:visible").removeAttr(
								"disabled",
							);
							_btn.parent("div")
								.find("span.spinner")
								.removeClass("is-active")
								.parent("div")
								.removeAttr("disabled");
							$("#assign_quiz").dialog("close");
							questionBank.snackbarNotice(data.message);
						},
						"json",
					);
					e.preventDefault();
				});
				
				$(document).on('input', 'input.stlms-qus-bank-search', function () {
					var searchBox = $(this);
					var searchKeyword = searchBox.val();
					clearTimeout($.data(this, "timer"));
					$(this).data( 'timer', setTimeout(function() {
						searchBox
						.addClass("ui-autocomplete-loading")
						.parents('.stlms-qus-bank-modal')
						.addClass("searching")
						.find('.stlms-qus-list-scroll li')
						.each(function(i, e) {
							var text = jQuery(e).find('label').text().toLowerCase();
							var matched = text.indexOf(searchKeyword.toLowerCase());
							if ( matched >= 0 ) {
								$(e).removeClass('hidden');
								return;
							}
							$(e).addClass('hidden');
						})
						.parent('.stlms-qus-list-scroll')
						.after(function() {
							$(this).next('p').remove();
							if( 0 === $(this).find('li:not(.hidden)').length ) {
								return  '<p>' + questionObject?.i18n.emptySearchResult + '</p>';
							}
							return '';
						})
						.parents('.stlms-qus-bank-modal')
						.removeClass("searching")
						.find('.ui-autocomplete-loading')
						.removeClass('ui-autocomplete-loading');
					}, 500));
				});

                $(document).on('click', 'button[data-tab="assign-quiz-list"]', function() {
                    var currentTab = $(this);
                    currentTab
                    .parents('.stlms-qus-bank-modal')
                    .addClass("searching");
                    $("#stlms_quiz_list").load(
                        questionObject.contentLoadUrl +
                            " #stlms_quiz_list > *",
                        {
							fetch_quizzes: 1,
							post_id: $('#post_ID').val(),
                            type: currentTab.data('filter_type'),
                        },
                        function () {
                            currentTab
                            .parents('.stlms-qus-bank-modal')
                            .removeClass('searching');
                        },
                    );
                } );
			},
		};

		$(function () {
			questionBank.init();
		});
	}
)(jQuery, window.wp);
