'use strict'

import $ from 'jquery'
import Events from '../_events'

const HeaderUI = (($) => {
  const D = document
  const W = window
  const $Body = $('html,body')
  const NAME = 'HeaderUI'
  const CLASSNAME = `js${NAME}`

  class HeaderUI {
    static init () {
      const ui = this
      ui.dispose()

      console.log(`${NAME}: init`)

      const $header = $(`#Header,.js${NAME}`)
      const updateHeader = () => {
        const h = $header.height()
        const s = $Body.scrollTop()
        if (s + 50 > h) {
          $Body.addClass('shrink')
        } else {
          $Body.removeClass('shrink')
        }
      }

      updateHeader()

      const updateFooter = (i, el) => {
        const $el = $(el)
        const footerHeight = $el.height()
        $el.css('height', footerHeight)

        $el.css('margin-top', -footerHeight)
        $el.siblings('.wrapper').css('padding-bottom', footerHeight)
      }

      $('.footer,.jsFooterUI').css('height', 'auto')
      setTimeout(() => {
        $('.footer,.jsFooterUI').each(updateFooter)
      }, 500)
    }

    static dispose () {
      console.log(`${NAME}: dispose`)

      $Body.removeClass('shrink')
      $(`#Header,.js${NAME},.footer,.jsFooterUI,.wrapper`).attr('css', '')
    }
  }

  $(W).on(`${Events.AJAX} ${Events.LOADED}`, () => {
    HeaderUI.init()
  })

  // align event content
  $(W).on(`${Events.RESIZE}`, () => {
    setTimeout(() => {
      HeaderUI.init()
    }, 200)
  })

  W.HeaderUI = new HeaderUI()

  return HeaderUI
})($)

export default HeaderUI