/**
 * Accordion
 * * Takes a details/summary wrapper and adds animation and functionality
 * * wrapper > div.titleBar > .title, button.expand > (details > summary, .content)...
 */
class Accordion {
  constructor(ele) {
    if (ele === null) {
      throw "Initialization failed: A proper wrapper element has not been provided.";
    }
    this.accordionWrapper = ele;
    this.accordions = this.accordionWrapper.querySelectorAll("details");
    this.accordionsArray = gsap.utils.toArray(this.accordions);
    this.expandButton = undefined;
    this.accordionObserver = new MutationObserver(this.accordionMutation);
    this.exclusive = this.accordionWrapper.classList.contains("exclusive");
    this.mutationConfig = {
      attributes: true,
      attributeFilter: ["open"],
      childList: false,
      subtree: false
    };

    this.accordionWrapper.prepend();
    /**
     * * Loop all details tags and set initial values such as opacity and state
     * * Open each menu to get the open and closed heights and save as data attributes
     * * Set a Mutation Observer to look for changes to the open tag
     */
    this.accordions.forEach((accordion) => {
      let content = accordion.querySelector(".content");
      let state = accordion.open;
      let opacity = state ? 1 : 0;
      if (state) {
        gsap.set(accordion.querySelector(".details-icon"), { rotation: 90 });
      } else {
        accordion.open = true;
      }
      accordion.dataset.openHeight = accordion.offsetHeight;
      accordion.dataset.closedHeight = accordion.querySelector(
        "summary"
      ).offsetHeight;

      this.accordionObserver.observe(accordion, this.mutationConfig);
      accordion.open = state;
    });

    this.createTitleBar();

    // If exclusive and has expand button
    if (this.expandButton) {
      if (this.exclusive) {
        this.expandButton.style.display = "none";
        this.expandButton.ariaHidden = true;
      } else {
        this.expandButton.addEventListener("pointerdown", () => {
          this.toggleAll();
        });
      }
    }
  }

  get title() {
    const currentTitle = this.accordionWrapper.querySelector(
      ".titleBar .title"
    );
    if (currentTitle) {
      return currentTitle.textContent;
    } else {
      return "No Title Set";
    }
  }

  set title(value) {
    this.accordionWrapper.querySelector(".titleBar .title").textContent = value;
  }

  isOpen = (item) => item.open === true;
  openedItems = () => this.accordionsArray.filter(this.isOpen);
  allOpened = () => this.openedItems().length === this.accordionsArray.length;

  isClosed = (item) => !this.isOpen(item);
  closedItems = () => this.accordionsArray.filter(this.isClosed);
  allClosed = () => this.closedItems().length === this.accordionsArray.length;

  createButton(classes, icon, text, label) {
    let newButton = document.createElement("button");
    newButton.classList.add(...classes.split(" "));
    newButton.ariaLabel = label;
    let buttonIcon = document.createElement("i");
    buttonIcon.classList.add(...icon.split(" "));
    newButton.append(buttonIcon);
    let buttonText = document.createElement("span");
    buttonText.textContent = buttonText;
    newButton.append(buttonText);

    return newButton;
  }

  createTitleBar() {
    let titleBar = document.createElement("div");
    titleBar.className = "titleBar";
    let title = document.createElement("h2");
    title.className = "title";
    title.textContent = this.title;
    titleBar.append(title);

    if (!this.exclusive) {
      this.expandButton = this.createButton(
        "expand",
        "expand-icon fa-solid fa-circle-arrow-down",
        "Expand",
        "Expand or Collapse All"
      );
      titleBar.append(this.expandButton);
    }

    this.accordionWrapper.prepend(titleBar);
  }

  /**
   * toggleState
   * * Opens or closes all details tags
   * - Tests if all details are open
   * -  true: close the details tag by removing the open attribute
   * -  false: if there is at least one closed details tag, open all
   */
  toggleAll() {
    const allOpen = this.allOpened();
    this.accordions.forEach((accordion) => {
      allOpen ? accordion.removeAttribute("open") : (accordion.open = true);
    });
  }

  /**
   * toggleAccordion
   * * Handles the animation to open or close the details tag
   * - Tests for the open attribute on the details tag
   * -  true: animate the details tag to the open position
   * -  else: animate the details tag to the closed position
   * @param {Object} accordion the details tag to process
   */
  toggleAccordion(accordion) {
    const state = accordion.open;
    const content = gsap.utils.toArray(accordion.childNodes);
    const icon = accordion.querySelector(".details-icon");
    let tl = gsap.timeline({
      defaults: { duration: 0.5, ease: "power4.out" }
    });

    // if state is true (open), open the details tag; else, close the details tag
    if (state) {
      accordion.classList.add("open");
      tl.to(accordion, { height: accordion.dataset.openHeight }, 0)
        .to(
          accordion.querySelector(".content"),
          { opacity: 1, duration: 0.25 },
          0.1
        )
        .to(icon, { rotation: 90 }, 0);

      // If exclusive, close all other details elements
      if (this.exclusive) {
        this.accordions.forEach((ele) => {
          if (ele !== accordion) {
            ele.removeAttribute("open");
            ele.classList.remove("open");
          } else {
            ele.classList.add("open");
          }
        });
      }
    } else {
      accordion.classList.remove("open");
      tl.to(
        accordion.querySelector(".content"),
        { opacity: 0, duration: 0.25 },
        0
      )
        .to(accordion, { height: accordion.dataset.closedHeight }, 0)
        .to(icon, { rotation: 0 }, 0);
    }
  }
  /**
   * accordionMutation
   * * The callback method for a Mutation Observer
   * * If the open tag is added to an accordion details tag, update the toggle button
   * - If the menu is collapsable, test if all details tags are open
   * -  true: update text in expand all button and change icon rotation
   * -  else: set icon to the proper rotation
   * @param {Object} mutationList
   * @param {Object} observer
   */
  accordionMutation = (mutationList, observer) => {
    let btn_tl = gsap.timeline({
      defaults: { duration: 0.5, ease: "power4.out" }
    });
    mutationList.forEach((mutation) => {
      let accordion = mutation.target;

      this.toggleAccordion(accordion);

      if (this.exclusive) {
        accordion.style.pointerEvents = "none";
        this.closedItems().forEach((item) => {
          item.style.pointerEvents = "all";
        });
      } else if (this.expandButton) {
        // Expand Button Logic
        if (this.allOpened()) {
          this.expandButton.querySelector("span").textContent = "Collapse";
          btn_tl.to(
            this.expandButton.querySelector(".expand-icon"),
            { rotation: 180 },
            0
          );
        } else {
          this.expandButton.querySelector("span").textContent = "Expand";
          btn_tl.to(
            this.expandButton.querySelector(".expand-icon"),
            { rotation: 0 },
            0
          );
        }
      } else {
        console.log("no expand button");
      }
    });
  };
}

let accordion = new Accordion(document.querySelector(".accordion"));
accordion.title = "Details/Summary";