import { h, Host } from '@stencil/core';
export function wrapBase(content) {
  return (h(Host, null, content));
}
export function getWrapper(leftMenuWidth, onLeftMenuWidthChange, navigate, storage, theme, apiKimlik, appConfig, user, memberships, membership, viewId) {
  return (content) => wrapContent(leftMenuWidth, onLeftMenuWidthChange, navigate, storage, theme, apiKimlik, appConfig, user, memberships, membership, viewId, content);
}
export function wrapContent(leftMenuWidth, onLeftMenuWidthChange, navigate, storage, theme, apiKimlik, appConfig, user, memberships, membership, viewId, content) {
  const topMenu = (h("dvn-app-top-menu", { appConfig: appConfig, membership: membership, memberships: memberships, user: user, viewId: viewId, navigate: navigate, storage: storage }));
  const leftMenu = (h("dvn-app-left-menu", { apiKimlik: apiKimlik, navigate: navigate, storage: storage, appConfig: appConfig, membership: membership, memberships: memberships, user: user, viewId: viewId, theme: theme, width: leftMenuWidth, onWidthChange: onLeftMenuWidthChange }));
  if (appConfig.mainNavigation.aligned === 'top') {
    if (appConfig.mainContent.centered) {
      return wrapBase(h("div", null,
        h("div", { class: "container-fluid" },
          h("div", { class: "row" },
            h("div", { class: "col-sm-12" },
              h("div", { class: "top-menu-container" }, topMenu)))),
        h("div", { class: "container" },
          h("div", { class: "row" },
            h("div", { class: "col-sm-12" },
              h("div", { class: "container-below-top-menu d-flex" }, content))))));
    }
    return wrapBase(h("div", { class: "container-fluid" },
      h("div", { class: "d-flex flex-column", style: { height: '100vh' } },
        h("div", { class: "top-menu-container" }, topMenu),
        h("div", { class: "d-flex flex-grow-1" }, content))));
  }
  if (appConfig.mainContent.centered) {
    // shows the top menu and hides the left menu when the screen is small
    return wrapBase(h("div", null,
      h("div", { class: "container-fluid d-sm-block d-md-none" },
        h("div", { class: "row" },
          h("div", { class: "col-sm-12" },
            h("div", { class: "top-menu-container" }, topMenu)))),
      h("div", { class: "container" },
        h("div", { class: "row" },
          h("div", { class: "col-md-4 col-lg-3 col-xl-3 d-none d-sm-none d-md-block" },
            h("div", { class: "left-menu-container fit-vh" }, leftMenu)),
          h("div", { class: "col-sm-12 col-md-8 col-lg-9 col-xl-9 d-flex" },
            h("div", { class: "container-below-top-menu d-flex", style: { overflow: 'hidden' } }, content))))));
  }
  // shows the left menu all the time
  return wrapBase(h("div", { class: "d-flex" },
    h("div", { class: "left-menu-container-leaned fit-vh", style: { '--left-menu-width': `${leftMenuWidth}px` } }, leftMenu),
    h("div", { class: "main-view-container pr-3" }, content)));
}
