"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;