// based on bootstrap breakpoints
// https://getbootstrap.com/docs/4.3/layout/overview/#responsive-breakpoints

import { getCookieLayoutObj, setCookieLayoutObj } from '../mmui-web';

export const SM_BREAK_POINT = 576;
export const MD_BREAK_POINT = 768;
export const LG_BREAK_POINT = 992;
export const XL_BREAK_POINT = 1200;

export function getLayoutBreakSize(width) {
  let size = 'xs';
  if (width >= SM_BREAK_POINT && width < MD_BREAK_POINT) {
    size = 'sm';
  } else if (width >= MD_BREAK_POINT && width < LG_BREAK_POINT) {
    size = 'md';
  } else if (width >= LG_BREAK_POINT && width < XL_BREAK_POINT) {
    size = 'lg';
  } else if (width >= XL_BREAK_POINT) {
    size = 'xl';
  }

  return size;
}

export function aboveBreakSize(breakSize, width) {
  let isAboveBreakSize = false;

  switch (breakSize) {
    case 'xs':
      isAboveBreakSize = width >= 0;
      break;
    case 'sm':
      isAboveBreakSize = width >= SM_BREAK_POINT;
      break;
    case 'md':
      isAboveBreakSize = width >= MD_BREAK_POINT;
      break;
    case 'lg':
      isAboveBreakSize = width >= LG_BREAK_POINT;
      break;
    case 'xl':
      isAboveBreakSize = width >= XL_BREAK_POINT;
      break;
    default:
      break;
  }

  return isAboveBreakSize;
}

export function belowBreakSize(breakSize, width) {
  let isBelowBreakSize = false;

  switch (breakSize) {
    case 'xs':
      isBelowBreakSize = width < SM_BREAK_POINT;
      break;
    case 'sm':
      isBelowBreakSize = width < MD_BREAK_POINT;
      break;
    case 'md':
      isBelowBreakSize = width < LG_BREAK_POINT;
      break;
    case 'lg':
      isBelowBreakSize = width < XL_BREAK_POINT;
      break;
    case 'xl':
      isBelowBreakSize = true;
      break;
    default:
      break;
  }

  return isBelowBreakSize;
}

/**
 * Initiates the sticky nav behavior.
 * example html with necessary css class and id:
 * ...
 * <nav id="main-nav"></nav>
 * <div class="mmui-front-page-layout"></div>
 * ...
 *
 * setStickyNavBehavior("main-nav")
 *
 */
export function setStickyNavBehavior(navid, defaultOffset = -1) {
  const mainNav = document.getElementById(navid);
  if (mainNav) {
    let offset;
    if (defaultOffset > -1) {
      offset = defaultOffset;
    } else {
      offset = mainNav.offsetTop;
    }
    window.addEventListener('scroll', () => {
      if (window.pageYOffset >= offset) {
        mainNav.classList.add('sticky-header');
      } else {
        mainNav.classList.remove('sticky-header');
      }
    });
  }
}

export function setLayoutRegular() {
  const pageObj = getCookieLayoutObj();
  const layoutElmts = document.querySelectorAll('.mmui-lg-layout');
  let elmt;
  for (let i = 0; i < layoutElmts.length; i++) {
    elmt = layoutElmts[i];
    elmt.classList.add('mmui-front-page-layout');
    elmt.classList.remove('mmui-lg-layout');
  }
  pageObj['page_layout'] = 'layout-regular';
  setCookieLayoutObj(pageObj);
}

export function setLayoutLarge() {
  const pageObj = getCookieLayoutObj();
  const layoutElmts = document.querySelectorAll('.mmui-front-page-layout');
  let elmt;
  for (let i = 0; i < layoutElmts.length; i++) {
    elmt = layoutElmts[i];
    elmt.classList.add('mmui-lg-layout');
    elmt.classList.remove('mmui-front-page-layout');
  }
  pageObj['page_layout'] = 'layout-large';
  setCookieLayoutObj(pageObj);
}

export function isLayoutLarge() {
  return document.querySelector('.mmui-lg-layout') != null;
}

export function isLayoutRegular() {
  return document.querySelector('.mmui-front-page-layout') != null;
}