/**
 * --------------------------------------------------------------------------
 * mobile-toggles.js
 * Toggle and mobile responsive functionality
 * --------------------------------------------------------------------------
 */

import {
  onDOMContentLoaded
} from 'bootstrap/js/src/util/index.js'
import SelectorEngine from 'bootstrap/js/src/dom/selector-engine.js'
import { uoeUID } from './helpers.js'

/**
 * ------------------------------------------------------------------------
 * Constants
 * ------------------------------------------------------------------------
 */

// const NAME = 'mobileToggles'
const CLASS_NAME_JS = 'edgel-js'
const CLASS_NAME_SEARCH_COLLAPSIBLE = 'masthead-logo-collapsible-search'
const SELECTOR_JS_CLASS = 'html'
const SELECTOR_UOE_NAV = '.uoe-nav ul'
const SELECTOR_SEARCH = '.masthead-search'
const SELECTOR_MASTHEAD = '.masthead'
const SELECTOR_ROW = '.row'
const TEXT_SEARCH_TOGGLE = '<span class="visually-hidden">Show/hide site search</span>'
const TEXT_MENU_TOGGLE = '<span class="visually-hidden">Toggle Navigation</span> Menu'

/**
 * Public methods
 */

const MobileToggles = {
  addIcons(selector, icon, iconSelector) {
    const _addIcons = function () {
      const selectorElements = SelectorEngine.find(this.selector)
      for (const [i, element] of selectorElements.entries()) {
        if (!SelectorEngine.findOne(this.iconSelector, element)) {
          element.prepend(this.icon)
          if (i !== selectorElements.length - 1) {
            this.icon = this.icon.cloneNode(true)
          }
        }
      }
    }.bind({ selector, icon, iconSelector })

    onDOMContentLoaded(_addIcons)
  },
  addJsClass() {
    const _addJsClass = function () {
      const selectorElement = this.selector === 'html' ? document.documentElement : SelectorEngine.findOne(this.selector)

      if (selectorElement) {
        selectorElement.classList.add(this.className)
      }
    }.bind({
      selector: SELECTOR_JS_CLASS,
      className: CLASS_NAME_JS
    })

    onDOMContentLoaded(_addJsClass)
  },
  addNavToggle() {
    const _addNavToggle = function () {
      const toggle = document.createElement('button')
      toggle.className = 'btn btn-uoe-nav-toggler btn-hamburger'
      toggle.setAttribute('type', 'button')
      toggle.setAttribute('aria-expanded', 'false')
      toggle.dataset.bsToggle = 'hamburger'
      toggle.innerHTML = this.TEXT_MENU_TOGGLE

      const element = SelectorEngine.findOne(this.selector)
      if (element) {
        element.classList.add('collapse')

        if (!element.id) {
          element.id = this.uoeUID()
        }

        toggle.dataset.bsTarget = `#${element.id}`
        toggle.setAttribute('aria-controls', element.id)
        element.before(toggle)
      }
    }.bind({
      selector: SELECTOR_UOE_NAV,
      uoeUID,
      TEXT_MENU_TOGGLE
    })

    onDOMContentLoaded(_addNavToggle)
  },
  addSearchToggle() {
    const _addSearchToggle = function () {
      const searchBlock = SelectorEngine.findOne(this.SELECTOR_SEARCH)
      if (!searchBlock) {
        return
      }

      const toggle = document.createElement('button')
      toggle.setAttribute('type', 'button')
      toggle.dataset.bsToggle = 'collapse'
      toggle.className = 'btn btn-masthead-search-toggler'
      toggle.innerHTML = this.TEXT_SEARCH_TOGGLE

      const row = searchBlock.closest(SELECTOR_ROW)
      if (!row || !row.closest(SELECTOR_MASTHEAD)) {
        throw new Error('Please use Bootstrap row and col classes in masthead')
      }

      // Make masthead-search collapsible
      const element = SelectorEngine.findOne(this.SELECTOR_SEARCH)
      if (element) {
        element.classList.add('collapse')

        if (!element.id) {
          element.id = this.uoeUID()
        }

        toggle.dataset.bsTarget = `#${element.id}`
        toggle.setAttribute('aria-controls', element.id)

        // Add padding to move the logo away from the search toggle button
        const insertPoint = row.firstElementChild
        insertPoint.classList.add(CLASS_NAME_SEARCH_COLLAPSIBLE)
        insertPoint.after(toggle)
      }
    }.bind({
      uoeUID,
      TEXT_SEARCH_TOGGLE,
      SELECTOR_SEARCH
    })

    onDOMContentLoaded(_addSearchToggle)
  }
}

/**
 * Add EdGEL toggle buttons
 */
MobileToggles.addJsClass()
MobileToggles.addNavToggle()
MobileToggles.addSearchToggle()

export default MobileToggles
