/**
 * File: UserExperience_Remove_CssJs_Page_View.js
 *
 * @since 2.7.0
 *
 * @package W3TC
 *
 * @global W3TCRemoveCssJsData
 */

jQuery(function () {
  const wpadminbar_height =
      jQuery(window).width() > 600 && jQuery("#wpadminbar").length
        ? jQuery("#wpadminbar").outerHeight()
        : 0,
    nav_bar_height = jQuery("#w3tc-top-nav-bar").length
      ? jQuery("#w3tc-top-nav-bar").outerHeight()
      : 0,
    options_menu_height = jQuery("#w3tc > #w3tc-options-menu").length
      ? jQuery("#w3tc > #w3tc-options-menu").outerHeight()
      : 0,
    form_bar_height = jQuery(".w3tc_form_bar").length
      ? jQuery(".w3tc_form_bar").outerHeight()
      : 0;

  jQuery(document).on("click", "#w3tc_remove_cssjs_singles_add", function () {
    let maxId = -1;

    jQuery(".remove_cssjs_singles_path").each(function () {
      const currentId = parseInt(
        jQuery(this)
          .closest("li")
          .attr("id")
          .replace("remove_cssjs_singles_", ""),
        10,
      );

      if (!isNaN(currentId)) {
        maxId = Math.max(maxId, currentId);
      }
    });

    const singleId = maxId + 1;

    const li = jQuery(
      '<li id="remove_cssjs_singles_' +
        singleId +
        '">' +
        '<table class="form-table">' +
        '<tr class="accordion-header">' +
        "<th>" +
        W3TCRemoveCssJsData.lang.singlesPathLabel +
        "</th>" +
        "<td>" +
        '<input class="remove_cssjs_singles_path" type="text" name="user-experience-remove-cssjs-singles[' +
        singleId +
        '][url_pattern]" value="" > ' +
        '<input type="button" class="button remove_cssjs_singles_delete" value="' +
        W3TCRemoveCssJsData.lang.singlesDelete +
        '"/>' +
        '<span class="accordion-toggle dashicons dashicons-arrow-down-alt2"></span>' +
        '<p class="description">' +
        W3TCRemoveCssJsData.lang.singlesPathDescription +
        "</p>" +
        '<div class="description_example">' +
        '<p class="description_example_trigger"><span class="dashicons dashicons-editor-help"></span><span class="description_example_text">' +
        W3TCRemoveCssJsData.lang.singlesExampleTrigger +
        "</span></p>" +
        '<div class="description">' +
        "<strong>" +
        W3TCRemoveCssJsData.lang.singlesPathExampleDirLabel +
        "</strong>" +
        "<code>" +
        W3TCRemoveCssJsData.lang.singlesPathExampleDir +
        "</code>" +
        "<strong>" +
        W3TCRemoveCssJsData.lang.singlesPathExampleFileLabel +
        "</strong>" +
        "<code>" +
        W3TCRemoveCssJsData.lang.singlesPathExampleFile +
        "</code>" +
        "</div>" +
        "</div>" +
        "</td>" +
        "</tr>" +
        "<tr>" +
        '<th><label for="remove_cssjs_singles_' +
        singleId +
        '_action">' +
        W3TCRemoveCssJsData.lang.singlesBehaviorLabel +
        "</label></th>" +
        "<td>" +
        '<p class="description">' +
        W3TCRemoveCssJsData.lang.singlesBehaviorDescription +
        "</p>" +
        '<label class="remove_cssjs_singles_behavior"><input class="remove_cssjs_singles_behavior_radio" type="radio" name="user-experience-remove-cssjs-singles[' +
        singleId +
        '][action]" value="exclude" checked><strong>' +
        W3TCRemoveCssJsData.lang.singlesBehaviorExcludeText +
        "</strong> " +
        W3TCRemoveCssJsData.lang.singlesBehaviorExcludeText2 +
        "</label>" +
        "<br/>" +
        '<label class="remove_cssjs_singles_behavior"><input class="remove_cssjs_singles_behavior_radio" type="radio" name="user-experience-remove-cssjs-singles[' +
        singleId +
        '][action]" value="include"><strong>' +
        W3TCRemoveCssJsData.lang.singlesBehaviorIncludeText +
        "</strong> " +
        W3TCRemoveCssJsData.lang.singlesBehaviorIncludeText2 +
        "</label>" +
        "</td>" +
        "</tr>" +
        "<tr>" +
        '<th><label class="remove_cssjs_singles_' +
        singleId +
        '_includes_label" for="remove_cssjs_singles_' +
        singleId +
        '_includes">' +
        W3TCRemoveCssJsData.lang.singlesIncludesLabelExclude +
        "</label></th>" +
        "<td>" +
        '<textarea id="remove_cssjs_singles_' +
        singleId +
        '_includes" name="user-experience-remove-cssjs-singles[' +
        singleId +
        '][includes]" rows="5" cols="50" ></textarea>' +
        '<p class="description remove_cssjs_singles_' +
        singleId +
        '_includes_description">' +
        W3TCRemoveCssJsData.lang.singlesIncludesDescriptionExclude +
        "</p>" +
        '<div class="description_example">' +
        '<p class="description_example_trigger"><span class="dashicons dashicons-editor-help"></span><span class="description_example_text">' +
        W3TCRemoveCssJsData.lang.singlesExampleTrigger +
        "</span></p>" +
        '<div class="description">' +
        "<code>" +
        W3TCRemoveCssJsData.lang.singlesIncludesExample +
        "</code>" +
        "</div>" +
        "</div>" +
        "</td>" +
        "</tr>" +
        "<tr>" +
        '<th><label class="remove_cssjs_singles_' +
        singleId +
        '_includes_content_label" for="remove_cssjs_singles_' +
        singleId +
        '_includes_content">' +
        W3TCRemoveCssJsData.lang.singlesIncludesContentLabelExclude +
        "</label></th>" +
        "<td>" +
        '<textarea id="remove_cssjs_singles_' +
        singleId +
        '_includes_content" name="user-experience-remove-cssjs-singles[' +
        singleId +
        '][includes_content]" rows="5" cols="50" ></textarea>' +
        '<p class="description remove_cssjs_singles_' +
        singleId +
        '_includes_content_description">' +
        W3TCRemoveCssJsData.lang.singlesIncludesContentDescriptionExclude +
        "</p>" +
        '<div class="description_example">' +
        '<p class="description_example_trigger"><span class="dashicons dashicons-editor-help"></span><span class="description_example_text">' +
        W3TCRemoveCssJsData.lang.singlesExampleTrigger +
        "</span></p>" +
        '<div class="description">' +
        "<code>" +
        W3TCRemoveCssJsData.lang.singlesIncludesContentExample +
        "</code>" +
        "</div>" +
        "</div>" +
        "</td>" +
        "</tr>" +
        "</table>" +
        "</li>",
    );

    jQuery("#remove_cssjs_singles_empty").remove();
    jQuery("#remove_cssjs_singles").append(li);
    li.find("tr:not(:first-child)").slideToggle(50);
    li.find("tr:first-child td .description").first().toggle(50);
    li.find("tr:first-child td .description_example").toggle(50);
    li.find(".accordion-toggle").toggleClass(
      "dashicons-arrow-down-alt2 dashicons-arrow-up-alt2",
    );

    // Scroll to taget after .5 seconds.
    setTimeout(function () {
      jQuery("html, body").animate(
        {
          scrollTop:
            li.find(".remove_cssjs_singles_path").offset().top -
            wpadminbar_height -
            nav_bar_height -
            options_menu_height -
            form_bar_height -
            10,
        },
        600,
      );
      li.find(".remove_cssjs_singles_path").focus();
    }, 500);
  });

  jQuery(document).on("change", ".remove_cssjs_singles_path", function () {
    let $inputField = jQuery(this);
    let singlePath = $inputField.val();
    let originalValue = $inputField.data("originalValue");

    if (singlePath && null !== singlePath) {
      singlePath = singlePath.trim();

      let exists = false;

      jQuery(".remove_cssjs_singles_path")
        .not($inputField)
        .each(function () {
          if (jQuery(this).val() === singlePath) {
            alert(W3TCRemoveCssJsData.lang.singlesExists);
            exists = true;
            $inputField.val(originalValue);
            // A timeout is needed here as the alert "steals" focus and causes a race condition.
            setTimeout(function () {
              $inputField.focus();
            }, 100);
            return false;
          }
        });

      if (!exists) {
        $inputField.data("originalValue", singlePath);
      }
    } else {
      alert(W3TCRemoveCssJsData.lang.singlesEmptyUrl);
      $inputField.val(originalValue);
      // A timeout is needed here as the alert "steals" focus and causes a race condition.
      setTimeout(function () {
        $inputField.focus();
      }, 100);
    }
  });

  jQuery(document).on("click", ".description_example_trigger", function () {
    var $trigger = jQuery(this).find(".description_example_text");
    var $description = jQuery(this).siblings(".description");
    if ($description.css("display") === "none") {
      $trigger.text(W3TCRemoveCssJsData.lang.singlesExampleTriggerClose);
      $description.css("display", "inline-block");
    } else {
      $trigger.text(W3TCRemoveCssJsData.lang.singlesExampleTrigger);
      $description.css("display", "none");
    }
  });

  jQuery(document).on("click", ".remove_cssjs_singles_delete", function () {
    jQuery(this).parents("#remove_cssjs_singles li").remove();
    if (0 === jQuery("#remove_cssjs_singles li").length) {
      jQuery("#remove_cssjs_singles").append(
        '<li id="remove_cssjs_singles_empty">' +
          W3TCRemoveCssJsData.lang.singlesNoEntries +
          '<input type="hidden" name="user-experience-remove-cssjs-singles[]"></li>',
      );
    }
    w3tc_beforeupload_bind();
  });

  jQuery(document).on(
    "change",
    ".remove_cssjs_singles_behavior_radio",
    function () {
      const parentId = jQuery(this).closest("li").attr("id");
      if (this.value === "exclude") {
        jQuery("." + parentId + "_includes_label").text(
          W3TCRemoveCssJsData.lang.singlesIncludesLabelExclude,
        );
        jQuery("." + parentId + "_includes_description").text(
          W3TCRemoveCssJsData.lang.singlesIncludesDescriptionExclude,
        );
        jQuery("." + parentId + "_includes_content_label").text(
          W3TCRemoveCssJsData.lang.singlesIncludesContentLabelExclude,
        );
        jQuery("." + parentId + "_includes_content_description").text(
          W3TCRemoveCssJsData.lang.singlesIncludesContentDescriptionExclude,
        );
      } else {
        jQuery("." + parentId + "_includes_label").text(
          W3TCRemoveCssJsData.lang.singlesIncludesLabelInclude,
        );
        jQuery("." + parentId + "_includes_description").text(
          W3TCRemoveCssJsData.lang.singlesIncludesDescriptionInclude,
        );
        jQuery("." + parentId + "_includes_content_label").text(
          W3TCRemoveCssJsData.lang.singlesIncludesContentLabelInclude,
        );
        jQuery("." + parentId + "_includes_content_description").text(
          W3TCRemoveCssJsData.lang.singlesIncludesContentDescriptionInclude,
        );
      }
    },
  );

  jQuery(document).on(
    "click",
    ".w3tc_remove_cssjs_singles .accordion-toggle",
    function () {
      var $icon = jQuery(this);
      var $table = $icon.closest("li").find("table");

      // Toggle visibility of all rows except the first one
      $table.find("tr:not(:first-child)").slideToggle(50);

      // Toggle visibility of .description and .description_example
      $icon.closest("td").find(".description").first().toggle(50);
      $icon.closest("td").find(".description_example").toggle(50);

      // Change the icon
      $icon.toggleClass("dashicons-arrow-down-alt2 dashicons-arrow-up-alt2");
    },
  );

  setRemoveCssjsSinglesPathValues();
});

function setRemoveCssjsSinglesPathValues() {
  jQuery(".remove_cssjs_singles_path").each(function () {
    var $inputField = jQuery(this);
    var originalValue = $inputField.val();
    $inputField.data("originalValue", originalValue);
  });
}
