/**
 * @module tgam-patterns-footer-accordion
 */

import throttle from "lodash/throttle";
import { toArray } from "./dom-methods";
import ee from "./event-emitter";
import EVENT_NAMES from "./event-names";

const accordionControlSelector = ".c-control-accordion--footer";
const accordionSelector = ".c-footer-accordion";
const accordionOpenClass = "c-footer-accordion__item--open";
const hideArrowsIfNoChildren = true;

let accordionControl;
let selectedItem;

/**
 * @method init
 * @description init method, adds event listener for scroll and resize
 * @return {undefined}
 */
export default function init() {
  accordionControl = toArray(document.querySelectorAll(accordionControlSelector));

  if (accordionControl) {
    onMatchMediaOrientation();

    accordionControl.forEach((el) => {
      if (hideArrowsIfNoChildren) {
        const accordionItem = el.parentElement.parentElement;
        const subAccordionList = accordionItem.querySelector(accordionSelector);
        const hasSubAccordion = subAccordionList !== null;
        if (!hasSubAccordion) {
          accordionItem.classList.add("c-footer-accordion__item--empty");
        }
      }
    });

    const accordionContainer = document.querySelector(".c-footer-accordion--top-level");
    accordionContainer && accordionContainer.addEventListener("click", onAccordionContainerClicked);

    window.addEventListener("orientationchange", throttle(onMatchMediaOrientation, 50));
    window.addEventListener("resize", throttle(onMatchMediaOrientation, 50));
  }
}

/**
 * @method onAccordionContainerClicked
 * @description callback for clicking on the accordion container
 * @param m {MouseEvent} click event
 * @return {undefined}
 */
export function onAccordionContainerClicked(m) {
  const targetElement = m.target;
  const isFooterAccordionButton = targetElement.classList.contains("c-footer-accordion-button");

  isFooterAccordionButton && onAccordionClicked(targetElement, m);
}

/**
 * @method onMatchMediaOrientation
 * @description track to orientation status for blowout menu
 * @return {undefined}
 */
export function onMatchMediaOrientation() {
  const footerWrapper = document.querySelector(".c-footer-wrapper");
  const footerColumnMenu = document.querySelector(".c-footer-column");
  const footerAccordionMenu = document.querySelector(accordionSelector);

  if (window.matchMedia("(min-width: 940px)").matches) {
    footerWrapper && footerWrapper.classList.add("c-footer-wrapper--column");
    footerColumnMenu && footerColumnMenu.classList.remove("u-hidden");
    footerAccordionMenu && footerAccordionMenu.classList.add("u-hidden");
  } else {
    footerWrapper && footerWrapper.classList.remove("c-footer-wrapper--column");
    footerColumnMenu && footerColumnMenu.classList.add("u-hidden");
    footerAccordionMenu && footerAccordionMenu.classList.remove("u-hidden");
  }
}

/**
 * @method closeAllItems
 * @description removes all open classes
 * @return {undefined}
 */
export function closeAllItems() {
  const accordionItem = toArray(document.querySelectorAll(".c-footer-accordion__item"));

  accordionItem.forEach((el) => {

    // only close accordion items that is not currently in focus
    el !== selectedItem && el.classList.remove(accordionOpenClass);
  });
}

/**
 * @method isRootAccordionItem
 * @description if element item contains an accordion level 2 return true
 * @param accordionItem {HTMLElement}
 * @return {boolean}
 */
export function isRootAccordionItem(accordionItem) {
  return accordionItem.querySelector(".c-footer-accordion--level-2") !== null;
}

/**
 * @method onAccordionClicked
 * @description when a footer accordion button is clicked
 * @param {HTMLElement} el - clicked element
 * @param {MouseEvent} m - click event
 * @return {undefined}
 */
export function onAccordionClicked(el, m) {
  const buttonElement = el;
  const accordionItem = el.parentElement.parentElement;
  const subAccordionList = accordionItem.querySelector(accordionSelector);
  const accordionCategory = el.querySelector(".c-footer-accordion-category");
  const hasSubAccordion = subAccordionList !== null;
  const isOpen = hasSubAccordion && accordionItem.classList.contains(accordionOpenClass);

  // if clicking on a root accordion item, then close all other root level items
  if (isRootAccordionItem(accordionItem)) {
    selectedItem = accordionItem;
    closeAllItems();
  }

  if (hasSubAccordion && !isOpen) {
    accordionItem.classList.add(accordionOpenClass);
    buttonElement.setAttribute("aria-expanded", true);
    accordionCategory.innerHTML = "close sub categories";
  } else {
    accordionItem.classList.remove(accordionOpenClass);
    buttonElement.setAttribute("aria-expanded", false);
    accordionCategory.innerHTML = "open sub categories";
  }

  // stops propagation here
  m.stopPropagation();

  ee.emit(EVENT_NAMES.footerAccordion.clicked);
}
