import $ from 'jquery';
import {UiUtils} from './utils/UiUtils';
import { detect } from 'detect-browser';
import mobile from 'is-mobile';
import 'focus-visible';

global.$ = $;
global.jQuery = $;

export default class ihk {
  static getBrowser() {
    return detect();
  }
  static isMobile(){
    return mobile();
  }

  static init() {
    const mobile = ihk.isMobile();
    const browser = ihk.getBrowser();
    const html = $('html');
    html.addClass( mobile ? 'mobile' : 'desktop' );
    html.attr('data-browser', browser.name);
    html.attr('data-os', browser.os);
  }

  static getUrlVars() {
    let vars = {};
    window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m, key, value) {
      vars[key] = value;
    });
    return vars;
  }

  static realVH() {
    const vh = window.innerHeight * 0.01;
    document.documentElement.style.setProperty('--viewport-height', vh + 'px');

    let scroller = document.scrollingElement;
    // Width of the scrollbar
    scroller.style.setProperty('--scrollbar-width', (window.innerWidth - scroller.clientWidth) + 'px');
  }
}

ihk.realVH();
$(window).on('resize', function() {
  ihk.realVH();
});

$(document).ready(function () {
  ihk.init();
  $('body').addClass('ready');
  // trigger das init event auf der globale jquery instanz so dass es alle modulle mitkriegen (z.B. cookie.js)
  //global.$('body').trigger('ihk-init');
  UiUtils.initUI();
});