// eslint-disable-next-line no-shadow-restricted-names
(function (undefined) {
  "use strict";

  // [module Collapsible]
  //
  // [description]
  //     Set of library functions that provide a simple way to add
  //     collapsible functionality to elements.
  this.Collapsible = {
    setCollapsibles: setCollapsibles,
    toggleFull: toggleFull,
    toggleHint: toggleHint,
  };

  // eslint-disable-next-line no-useless-return
  return;

  // [function setCollapsibles]
  //
  // [description]
  //     Scan element's content for generic collapsible containers.
  //
  // [params]
  //     el: container
  function setCollapsibles(el) {
    var linkBottom, linkTop, short_custom;

    linkTop = '<a href="#" class="full full-top">See full output</a>';
    linkBottom = '<a href="#" class="full full-bottom">See full output</a>';

    // Standard longform + shortfom pattern.
    el.find(".longform").hide();
    el.find(".shortform").append(linkTop, linkBottom); // xss-lint: disable=javascript-jquery-append

    // Custom longform + shortform text pattern.
    short_custom = el.find(".shortform-custom");

    // Set up each one individually.
    short_custom.each(function (index, elt) {
      var close_text, open_text;

      open_text = $(elt).data("open-text");
      close_text = $(elt).data("close-text");
      edx.HtmlUtils.append(
        $(elt),
        edx.HtmlUtils.joinHtml(
          edx.HtmlUtils.HTML("<a href='#' class='full-custom'>"),
          gettext(open_text),
          edx.HtmlUtils.HTML("</a>"),
        ),
      );

      $(elt)
        .find(".full-custom")
        .click(function (event) {
          Collapsible.toggleFull(event, open_text, close_text);
        });
    });

    // Collapsible pattern.
    el.find(".collapsible header + section").hide();

    // Set up triggers.
    el.find(".full").click(function (event) {
      Collapsible.toggleFull(event, "See full output", "Hide output");
    });
    el.find(".collapsible header a").click(Collapsible.toggleHint);
  }

  // [function toggleFull]
  //
  // [description]
  //     Toggle the display of full text for a collapsible element.
  //
  // [params]
  //     event: jQuery event object associated with the event that
  //         triggered this callback function.
  //     open_text: text that should be displayed when the collapsible
  //         is open.
  //     close_text: text that should be displayed when the collapsible
  //         is closed.
  function toggleFull(event, open_text, close_text) {
    var $el, new_text, parent;

    event.preventDefault();

    parent = $(event.target).parent();
    parent.siblings().slideToggle();
    parent.parent().toggleClass("open");

    if ($(event.target).text() === open_text) {
      new_text = close_text;
    } else {
      new_text = open_text;
    }

    if ($(event.target).hasClass("full")) {
      $el = parent.find(".full");
    } else {
      $el = $(event.target);
    }

    $el.text(new_text);
  }

  // [function toggleHint]
  //
  // [description]
  //     Toggle the collapsible open to show the hint.
  //
  // [params]
  //     event: jQuery event object associated with the event that
  //         triggered this callback function.
  function toggleHint(event) {
    event.preventDefault();

    $(event.target).parent().siblings().slideToggle();
    $(event.target).parent().parent().toggleClass("open");
  }
}).call(this);