text: /**
   * @file /js/zanav.js
   * @author ZaWorst
   * @mail action@zaworst.com
   * @brief This is ZaWorst's custom library for Javascript.
   * @version 1.0.0
   * @date 03-11-2021
   *
   * @copyright Copyright (c) 2021 MIT License
   */
  
  
  'use strict'
  
  import { magicDOM, $, Glasium, Console, zalib } from './zalibrary.js'
  import state from './font-awesome.js'
  
  
  Console.info('font-awesome :', state)
  
  
  const navigation = {
      container: magicDOM.createTree({
          classList: 'nav', child: {
              indicator: { classList: 'nav__indicator' },
              tip: {
                  classList: 'nav__tip', child: {
                      t: { classList: 'nav__tip__title' },
                      d: { classList: 'nav__tip__des' },
                  }
              },
              underlay: { classList: 'nav__underlay' },
              window: { classList: 'nav__window' },
          }
      }),
  
      left: magicDOM.createTree({
          classList: 'nav--left', child: {
              logo: {
                  id: 'nav-logo', classList: 'nav__component', child: {
                      con: {
                          classList: 'nav__logo', child: {
                              icon: { tag: 'img', classList: 'nav__logo__icon', attribute: { alt: 'logo', src: '/favicon.ico', loading: 'lazy' } },
                              t: { classList: 'nav__logo__title', child: 'logo' }
                          }
                      }
                  }
              }
          }
      }),
  
      right: magicDOM.createTree({
          classList: 'nav--right', child: {
              hamburger: { classList: 'nav__component', id: "nav-hamburger" },
              subwindow: { classList: 'nav__component', id: "nav-subwindow" },
          }
      }),
  
      setting: {
          container: magicDOM.createTree({
              classList: 'setting', child: {
                  content: { classList: 'setting__content' },
                  navigator: {
                      classList: 'setting__navigator', child: {
                          sth: {
                              classList: 'setting__navigator__id', child: {
                                  t: { classList: 'setting__navigator__t', child: 'kết quả học' },
                                  icon: { tag: 'i', classList: ['setting__navigator__icon', 'fa-solid', 'fa-home'] },
                              }
                          },
                          g: {
                              classList: ['setting__navigator__id', 'active'], child: {
                                  t: { classList: 'setting__navigator__t', child: 'something' },
                                  icon: { tag: 'i', classList: ['setting__navigator__icon', 'fa-solid', 'fa-home'] },
                              }
                          },
                          d: {
                              classList: 'setting__navigator__id', child: {
                                  t: { classList: 'setting__navigator__t', child: 'something' },
                                  icon: { tag: 'i', classList: ['setting__navigator__icon', 'fa-solid', 'fa-home'] },
                              }
                          },
                      }
                  },
              }
          }),
  
          hide() { this.container.classList.remove('setting--show') },
  
          show() { this.container.classList.add('setting--show') },
  
          init({
              title = 'setting',
              description = 'change how this application works'
          } = {}) {
              magicDOM.bind(navigation.container, { setting: this.container })
              navigation.initTip(navigation.hamburger.container, { title, description, flip: true })
          },
      },
  
      hamburger: magicDOM
          .createHam()
          .onDeactivate(() => {
              navigation.setting.hide()
              navigation.underlay.hide()
              navigation.contentIsOpen = false
          })
          .onActivate(() => {
              navigation.setting.show()
              navigation.underlay.show()
              navigation.contentIsOpen = true
          }),
  
      subwindow: {
          hide() { },
          show() { }
      },
  
      underlay: {
          hide() {
              navigation.contentIsOpen = false
              navigation.container.underlay.classList.remove('nav__underlay--shown')
          },
  
          show() {
              navigation.contentIsOpen = false
              navigation.container.underlay.classList.add('nav__underlay--shown')
          },
  
          toggle() {
              navigation.contentIsOpen = !navigation.contentIsOpen
              navigation.container.underlay.classList.toggle('nav__underlay--shown')
          }
      },
  
      contentIsOpen: false,
  
  
      initTip(target, {
          title = 'title',
          description = 'description',
          flip = false
      } = {}) {
          $(target)
              .on('mouseenter', event => {
                  if (zalib.isOnMobile()) return
                  if (this.contentIsOpen) return
  
  
                  const { innerWidth } = window
                  const { left, right } = event.target.getBoundingClientRect()
                  const tip = this.container.tip
  
  
                  tip.t.innerText = title
                  tip.d.innerText = description
  
  
                  $(tip)
                      .addClass('nav__tip--active')
                      .css({
                          left: flip ? null : `${left}px`,
                          right: flip ? `${innerWidth - right}px` : null,
                          textAlign: flip ? 'right' : 'left'
                      })
  
                  this.container.classList.add('nav--has-tip')
              })
              .on('mouseleave', () => {
                  if (zalib.isOnMobile()) return
  
                  this.container.tip.classList.remove('nav__tip--active')
                  this.container.classList.remove('nav--has-tip')
              })
              .on('mouseup', () => {
                  if (this.contentIsOpen) return
  
                  this.container.tip.classList.remove('nav__tip--active')
                  this.container.classList.remove('nav--has-tip')
              })
      },
  
  
      initRoute(container, routeIdea = undefined) {
          magicDOM.bind(this.left, { route: container })
  
          $(container).addClass('nav__component')
          $(container, 'a')
              .addClass('nav__link')
              .forEach(route => {
                  let hrefArray = route.href.split('/')
                  let key = hrefArray[hrefArray.length - 1] === '' ? 'home' : hrefArray[hrefArray.length - 1]
  
                  let solidIcon = routeIdea[key].solidIcon
                  if (!route.dataset.icon) route.appendChild(magicDOM.createElement('i', { classList: ['fa-solid', `fa-${solidIcon}`] }))
                  route.dataset.icon = 'done'
  
                  let title = routeIdea[key].title
                  let description = routeIdea[key].description
  
                  this.initTip(route, { title, description })
              })
  
  
          const getCurrentRoute = ({ target }) => {
              const { left, width } = target.getBoundingClientRect()
  
              $(this.container.indicator).css({
                  left: `${left}px`,
                  width: `${width}px`
              })
          }
  
          $(container, '.nav__link').on('click', getCurrentRoute)
  
          setTimeout(getCurrentRoute, 1300, {
              target: $(
                  container,
                  `.nav__link[href="${window.location.pathname}"]`
              ).fc
          })
  
  
          const initBg = () => Glasium.independence(container, {
              defaultCombo: document.body.dataset.theme === 'dark' ? 'dark' : 'whitesmoke'
          })
  
          setTimeout(initBg, 500)
  
          new MutationObserver(initBg).observe(document.body, { attributeFilter: ['data-theme'] })
  
  
          return this
      },
  
  
      initSetting({
          title = 'setting',
          description = 'change how this application works'
      } = {}) {
          this.setting.init({ title, description })
          return this
      },
  
  
      init(query, {
          title = 'logo',
          description = undefined,
      } = {}) {
          const con = $(query).fc
          con.insertBefore(this.container, con.firstChild)
  
  
          magicDOM.bind(this.container, { left: this.left, right: this.right })
          magicDOM.bind(this.right.hamburger, { ham: this.hamburger.container })
  
  
          this.left.logo.con.t.innerHTML = title
  
  
          if (description)
              this.initTip(this.left.logo, { title, description })
  
  
          $(this.container.underlay).on('click', () => {
              this.underlay.hide()
              this.hamburger.deactivate()
              this.subwindow.hide()
          })
  
  
          return this
      }
  }
  
  
  export default navigation
  