define([
  "jquery",
  "underscore",
  "backbone",
  "views/CitationView",
  "text!templates/citations/citationHeader.html",
], function ($, _, Backbone, CitationView, HeaderTemplate) {
  "use strict";

  /**
   * @class CitationHeaderView
   * @classdesc The CitationHeaderView shows a citation information displayed as
   * a header, with expandable author list (if there are more than a certain
   * number of authors).
   * @classcategory Views
   * @extends CitationView
   * @screenshot views/CitationHeaderView.png
   * @since 2.23.0
   * @constructor
   */
  var CitationHeaderView = CitationView.extend(
    /** @lends CitationHeaderView.prototype */ {
      /**
       * The name of this type of view
       * @type {string}
       */
      type: "CitationHeader",

      /**
       * See {@link CitationView#className}
       */
      className: "citation header",

      /**
       * When there are more than this many authors, then this number of authors
       * will always be displayed, and the rest will be viewable with a click.
       * The last author will always be displayed.
       * @type {number}
       * @default 20
       */
      maxAuthors: 20,

      /**
       * See {@link CitationView#styles}. This view only uses the header style.
       * @type {Object}
       */
      styles: {
        header: {
          full: {
            template: _.template(HeaderTemplate), //
            render: "renderHeader",
          },
        },
      },

      /**
       * Override the CitationView style to use the header style.
       * @see {@link CitationView#style}
       */
      style: "header",

      /**
       * Override the CitationView context to use the full context.
       * @see {@link CitationView#context}
       */
      context: "full",

      /**
       * Never create a link for the citation header.
       * See {@link CitationView#createLink}
       */
      createLink: false,

      /**
       * Never create a link for the citation header title.
       * See {@link CitationView#createTitleLink}
       */
      createTitleLink: false,

      /**
       * IDs used in the template to identify the elements that will be
       * manipulated by this view to make the author list collapsible.
       * @type {Object}
       * @property {string} grp1 - The ID of the first group of authors
       * @property {string} grp2 - The ID of the second group of authors
       * @property {string} btn - The ID of the button that will toggle the
       *  visibility of the second group of authors
       * @property {string} last - The ID of the last author
       * @property {string} ellipsis - The ID of the ellipsis that will be
       * displayed when the second group of authors is hidden
       */
      classes: {
        grp1: "CV_authors1",
        grp2: "CV_authors2",
        btn: "CV_show-authors",
        last: "CV_last-author",
        ellipsis: "CV_ellipsis",
      },

      /**
       * Tracks whether the list of authors is open or closed. This will be set
       * automatically when the button is clicked. Set to true when initializing
       * the view to initially render the list open.
       * @type {boolean}
       */
      authorListIsOpen: false,

      /**
       * Render the citation header. Called by {@link CitationView#render}.
       * @param {Object} options - Options to pass to the render method
       * @param {string} options.style - The style to use for rendering
       */
      renderHeader: function (options, template) {
        const authors = options.originArray.map((author) => {
          return this.CSLNameToFullNameStr(author);
        });
        // Split the authors into two groups, one with the maximum number of
        // authors configured (including the last author), and one with the
        // rest.
        const numAuthors = (this.numAuthors = authors.length);
        const maxAuthors = (this.maxAuthors = this.maxAuthors || numAuthors);
        const authorsGrp1 = (this.authorsGrp1 = authors.slice(0, maxAuthors));
        const authorsGrp2 = (this.authorsGrp2 = authors.slice(maxAuthors));
        const numAuthorsGrp2 = (this.numAuthorsGrp2 = authorsGrp2.length);

        // Create a text string for both groups of authors.
        let grp1Str = "";
        let grp2Str = "";
        let lastAuthStr = "";

        if (numAuthors === 0) {
          // Keep the strings empty if there are no authors.
        } else if (numAuthors === 1) {
          // If there is only one author, just show the name.
          grp1Str = authorsGrp1[0];
        } else if (numAuthors === 2) {
          // If there are two authors, separate with and.
          grp1Str = authorsGrp1.join(" and ");
        } else if (numAuthors <= maxAuthors) {
          // If there are less than maxAuthors, separate with commas and and.
          grp1Str = authorsGrp1.slice(0, -1).join(", ");
          grp1Str += ", and " + authorsGrp1.slice(-1);
        } else {
          // Move the last author from grp2 into its own variable
          const lastAuthor = authorsGrp2.pop();
          // Move the last author from grp1 to the start of grp2
          authorsGrp2.unshift(authorsGrp1.pop());
          // Grp1 string should be separated by just commas, including a comma
          // at the very end.
          grp1Str = authorsGrp1.join(", ") + ", ";
          // Store the "and" with the last author
          lastAuthStr = " and " + lastAuthor;
          // grp2 also just commas
          grp2Str = authorsGrp2.join(", ");
        }
        options.authorsGrp1 = grp1Str;
        options.authorsGrp2 = grp2Str;
        options.lastAuthor = lastAuthStr;

        // Pass classes that we can use to refer to all the elements we need to
        // manipulate.
        options.classes = this.classes;

        this.el.innerHTML = template(options);

        // Select all the elements
        const els = (this.els = {});
        Object.keys(options.classes).forEach((key) => {
          els[key] = this.el.querySelector(`.${options.classes[key]}`);
        });

        // If there are fewer than maxAuthors, then the template will not render
        // a button or ellipsis. Otherwise, set the open/close behavior
        if (els.btn) {
          els.btn.addEventListener("click", this.toggleList.bind(this));
        }
        if (els.ellipsis) {
          els.ellipsis.addEventListener("click", this.openList.bind(this));
        }
        if (els.ellipsis || els.btn) {
          // Set the list to be open or closed based on the initial setting of
          // in the view
          if (this.authorListIsOpen) {
            this.openList();
          } else {
            this.closeList();
          }
        }
      },

      /**
       * Open the list of authors, showing all authors.
       */
      openList: function () {
        try {
          const els = this.els;
          els.grp2.style.display = "";
          els.btn.innerHTML = "- Show fewer authors";
          els.ellipsis.style.display = "none";
          // Reorder the elements
          els.btn.parentNode.append(
            els.grp1,
            els.grp2,
            els.last,
            els.btn,
            els.ellipsis
          );
          this.authorListIsOpen = true;
        } catch (error) {
          console.log(
            "Failed to expand an author list in the citation view.",
            error
          );
        }
      },

      /**
       * Close the list of authors, showing only the first group of authors. The
       * last author will always be shown.
       */
      closeList: function () {
        try {
          const els = this.els;
          const no = this.numAuthorsGrp2 || "";
          els.grp2.style.display = "none";
          els.btn.innerHTML = `+ Show ${no} more authors`;
          els.ellipsis.style.display = "";
          // Reorder elements
          els.btn.parentNode.append(
            els.grp1,
            els.ellipsis,
            els.last,
            els.btn,
            els.grp2
          );
          this.authorListIsOpen = false;
        } catch (error) {
          console.log(
            "Failed to collapse an author list in the citation view.",
            error
          );
        }
      },

      /**
       * Toggle the visibility of the second group of authors. If the second
       * group is visible, then it will be hidden. If the second group is
       * hidden, then it will be shown.
       */
      toggleList: function () {
        if (this.authorListIsOpen) {
          this.closeList();
        } else {
          this.openList();
        }
      },
    }
  );

  return CitationHeaderView;
});