import "@salut/design-system-salut";
import "@salut/design-system-salut/css/main.css";
import "../../fonts/fonts.css";
import { html, nothing } from "lit";
import gencatLogo from "../../../UI/images/Gencat_Logotip.svg";
import { PrimariaShell } from "./primaria-shell";
import { shellViews } from "./constants";
import { translate } from "../../../locales";
import { shellApi } from "../../../api/api";

export const template = (props: PrimariaShell) => html`
<primaria-content-switcher id="main-switcher" attrForSelected="view" .selected=${props.viewSelected}>
  <div class="container" view=${shellViews.shell}>
    <primaria-shell-header></primaria-shell-header>
    <div class="main-container">
      <div class="sidebar" ?expanded=${props.sidebarExpanded}>
         <div id="menu-region-container"></div>
         <!-- <primaria-region id="menu-region" name=${shellApi.regionManager.regions.shell.navigationMenu}></primaria-region> -->
        <div class="quick-actions-content">
          <quick-actions-menu>
            <div class="${props.sidebarExpanded ? "create-button-opened" : "create-button-closed"} " slot="anchor" id="usage-anchor">
              <div class="${props.quickActionBusy ? "create-button-icon-badge" : ""}">
                ${props.quickActionBusy ? html`<dss-notification-badge value="" state="error" borderwhite="" type="default" dot=""></dss-notification-badge>` : nothing}  
                <dss-icon class="${props.sidebarExpanded ? "icon" : ""}" icon="add_circle_outline" size="md"></dss-icon>
              </div>
              ${props.sidebarExpanded ? translate("actions.create") : nothing}
              ${
                !props.sidebarExpanded
                  ? html`<dss-tooltip position="right">
                ${translate("actions.create")}
              </dss-tooltip>`
                  : nothing
              }
            </div>
            <dss-action-menu id="quick-actions-region-container" slot="content" id="content" anchor="usage-anchor"></dss-action-menu>
          </quick-actions-menu>
        </div>
        <div class="bottom-content">
          <div class="bottom-content-first">
            <hr class="dss-divider--bold ${props.sidebarExpanded ? "divider-opened" : "divider-closed"}" />
            <div id="navigation-menu-lower-region-container"></div>
          </div>
          <primaria-nav-item 
            .config=${{
              icon: "expand_circle_right",
              label: props.sidebarExpanded
                ? translate("actions.toggleMenuClose")
                : translate("actions.toggleMenuOpen"),
              fill: true,
              rotateIcon: props.sidebarExpanded,
              callbackFn: () => props._toggleSidebar(),
            }}
            class="toggle-button"
          ></primaria-nav-item>
        </div>
      </div>
      <div class="content">
        <div id="floating-region-container"></div>
        <primaria-content-switcher id="main-region-container"></primaria-content-switcher>
      </div>
    </div>
    <!-- <div class="footer">
      <div class="footer-logo">
        <img src=${gencatLogo} alt="logo" />
        <span>|</span>
        <span>Historial Electrònic de Salut (HES)</span>
      </div>
    </div> -->
  </div>
  <primaria-error-view .error=${props.error} view=${shellViews.error}></primaria-error-view>
</primaria-content-switcher>
`;