dees-catalog/ts_web/elements/00group-appui/dees-appui-base/dees-appui-base.ts

import {
  DeesElement,
  type TemplateResult,
  property,
  customElement,
  html,
  css,
  cssManager,
  state,
} from '@design.estate/dees-element';
import * as interfaces from '../../interfaces/index.js';
import * as plugins from '../../00plugins.js';
import type { DeesAppuiBar } from '../dees-appui-appbar/index.js';
import type { DeesAppuiMainmenu } from '../dees-appui-mainmenu/dees-appui-mainmenu.js';
import type { DeesAppuiSecondarymenu } from '../dees-appui-secondarymenu/dees-appui-secondarymenu.js';
import type { DeesAppuiMaincontent } from '../dees-appui-maincontent/dees-appui-maincontent.js';
import type { DeesAppuiActivitylog } from '../dees-appui-activitylog/dees-appui-activitylog.js';
import { demoFunc } from './dees-appui-base.demo.js';

// Import child components
import '../dees-appui-appbar/index.js';
import '../dees-appui-mainmenu/dees-appui-mainmenu.js';
import '../dees-appui-secondarymenu/dees-appui-secondarymenu.js';
import '../dees-appui-maincontent/dees-appui-maincontent.js';
import '../dees-appui-activitylog/dees-appui-activitylog.js';

@customElement('dees-appui-base')
export class DeesAppuiBase extends DeesElement {
  public static demo = demoFunc;

  // Properties for appbar
  @property({ type: Array })
  accessor appbarMenuItems: interfaces.IAppBarMenuItem[] = [];

  @property({ type: String })
  accessor appbarBreadcrumbs: string = '';

  @property({ type: String })
  accessor appbarBreadcrumbSeparator: string = ' > ';

  @property({ type: Boolean })
  accessor appbarShowWindowControls: boolean = true;


  @property({ type: Object })
  accessor appbarUser: {
    name: string;
    email?: string;
    avatar?: string;
    status?: 'online' | 'offline' | 'busy' | 'away';
  } | undefined = undefined;

  @property({ type: Array })
  accessor appbarProfileMenuItems: (plugins.tsclass.website.IMenuItem & { shortcut?: string } | { divider: true })[] = [];

  @property({ type: Boolean })
  accessor appbarShowSearch: boolean = false;

  // Properties for mainmenu
  @property({ type: String })
  accessor mainmenuLogoIcon: string = '';

  @property({ type: String })
  accessor mainmenuLogoText: string = '';

  @property({ type: Array })
  accessor mainmenuGroups: interfaces.IMenuGroup[] = [];

  @property({ type: Array })
  accessor mainmenuBottomTabs: interfaces.ITab[] = [];

  @property({ type: Array })
  accessor mainmenuTabs: interfaces.ITab[] = [];

  @property({ type: Object })
  accessor mainmenuSelectedTab: interfaces.ITab | undefined = undefined;

  // Properties for secondarymenu
  @property({ type: String })
  accessor secondarymenuHeading: string = 'Menu';

  @property({ type: Array })
  accessor secondarymenuGroups: interfaces.ISecondaryMenuGroup[] = [];

  @property({ type: Object })
  accessor secondarymenuSelectedItem: interfaces.ISecondaryMenuItem | undefined = undefined;

  /** Legacy support for flat options (backward compatibility) */
  @property({ type: Array })
  accessor secondarymenuOptions: (interfaces.ISelectionOption | { divider: true })[] = [];

  // Collapse states
  @property({ type: Boolean })
  accessor mainmenuCollapsed: boolean = false;

  @property({ type: Boolean })
  accessor secondarymenuCollapsed: boolean = false;

  // Properties for maincontent
  @property({ type: Array })
  accessor maincontentTabs: interfaces.ITab[] = [];

  // References to child components
  @state()
  accessor appbar: DeesAppuiBar | undefined = undefined;

  @state()
  accessor mainmenu: DeesAppuiMainmenu | undefined = undefined;

  @state()
  accessor secondarymenu: DeesAppuiSecondarymenu | undefined = undefined;

  @state()
  accessor maincontent: DeesAppuiMaincontent | undefined = undefined;

  @state()
  accessor activitylog: DeesAppuiActivitylog | undefined = undefined;

  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
        position: absolute;
        height: 100%;
        width: 100%;
        background: ${cssManager.bdTheme('#f0f0f0', '#1a1a1a')};
      }
      .maingrid {
        position: absolute;
        top: 40px;
        height: calc(100% - 40px);
        width: 100%;
        display: grid;
        grid-template-columns: auto auto 1fr 240px;
        grid-template-rows: 1fr;
      }

      /* Z-index layering for proper stacking (position: relative required for z-index to work) */
      .maingrid > dees-appui-mainmenu {
        position: relative;
        z-index: 3;
      }

      .maingrid > dees-appui-secondarymenu {
        position: relative;
        z-index: 2;
      }

      .maingrid > dees-appui-maincontent {
        position: relative;
        z-index: 1;
      }

      .maingrid > dees-appui-activitylog {
        position: relative;
        z-index: 1;
      }
    `,
  ];

  // INSTANCE
  public render(): TemplateResult {
    return html`
      <style></style>
      <dees-appui-appbar
        .menuItems=${this.appbarMenuItems}
        .breadcrumbs=${this.appbarBreadcrumbs}
        .breadcrumbSeparator=${this.appbarBreadcrumbSeparator}
        .showWindowControls=${this.appbarShowWindowControls}
        .user=${this.appbarUser}
        .profileMenuItems=${this.appbarProfileMenuItems}
        .showSearch=${this.appbarShowSearch}
        @menu-select=${(e: CustomEvent) => this.handleAppbarMenuSelect(e)}
        @breadcrumb-navigate=${(e: CustomEvent) => this.handleAppbarBreadcrumbNavigate(e)}
        @search-click=${() => this.handleAppbarSearchClick()}
        @user-menu-open=${() => this.handleAppbarUserMenuOpen()}
        @profile-menu-select=${(e: CustomEvent) => this.handleAppbarProfileMenuSelect(e)}
      ></dees-appui-appbar>
      <div class="maingrid">
        <dees-appui-mainmenu
          .logoIcon=${this.mainmenuLogoIcon}
          .logoText=${this.mainmenuLogoText}
          .menuGroups=${this.mainmenuGroups}
          .bottomTabs=${this.mainmenuBottomTabs}
          .tabs=${this.mainmenuTabs}
          .selectedTab=${this.mainmenuSelectedTab}
          .collapsed=${this.mainmenuCollapsed}
          @tab-select=${(e: CustomEvent) => this.handleMainmenuTabSelect(e)}
          @collapse-change=${(e: CustomEvent) => this.handleMainmenuCollapseChange(e)}
        ></dees-appui-mainmenu>
        <dees-appui-secondarymenu
          .heading=${this.secondarymenuHeading}
          .groups=${this.secondarymenuGroups}
          .selectionOptions=${this.secondarymenuOptions}
          .selectedItem=${this.secondarymenuSelectedItem}
          .collapsed=${this.secondarymenuCollapsed}
          @item-select=${(e: CustomEvent) => this.handleSecondarymenuItemSelect(e)}
          @collapse-change=${(e: CustomEvent) => this.handleSecondarymenuCollapseChange(e)}
        ></dees-appui-secondarymenu>
        <dees-appui-maincontent
          .tabs=${this.maincontentTabs}
        >
          <slot name="maincontent"></slot>
        </dees-appui-maincontent>
        <dees-appui-activitylog></dees-appui-activitylog>
      </div>
    `;
  }

  async firstUpdated() {
    // Get references to child components
    this.appbar = this.shadowRoot.querySelector('dees-appui-appbar');
    this.mainmenu = this.shadowRoot.querySelector('dees-appui-mainmenu');
    this.secondarymenu = this.shadowRoot.querySelector('dees-appui-secondarymenu');
    this.maincontent = this.shadowRoot.querySelector('dees-appui-maincontent');
    this.activitylog = this.shadowRoot.querySelector('dees-appui-activitylog');
  }

  // Event handlers for appbar
  private handleAppbarMenuSelect(e: CustomEvent) {
    this.dispatchEvent(new CustomEvent('appbar-menu-select', {
      detail: e.detail,
      bubbles: true,
      composed: true
    }));
  }

  private handleAppbarBreadcrumbNavigate(e: CustomEvent) {
    this.dispatchEvent(new CustomEvent('appbar-breadcrumb-navigate', {
      detail: e.detail,
      bubbles: true,
      composed: true
    }));
  }

  private handleAppbarSearchClick() {
    this.dispatchEvent(new CustomEvent('appbar-search-click', {
      bubbles: true,
      composed: true
    }));
  }

  private handleAppbarUserMenuOpen() {
    this.dispatchEvent(new CustomEvent('appbar-user-menu-open', {
      bubbles: true,
      composed: true
    }));
  }

  private handleAppbarProfileMenuSelect(e: CustomEvent) {
    this.dispatchEvent(new CustomEvent('appbar-profile-menu-select', {
      detail: e.detail,
      bubbles: true,
      composed: true
    }));
  }

  // Event handlers for mainmenu
  private handleMainmenuTabSelect(e: CustomEvent) {
    this.mainmenuSelectedTab = e.detail.tab;
    // Update secondary menu heading based on main menu selection
    this.secondarymenuHeading = e.detail.tab.key;
    this.dispatchEvent(new CustomEvent('mainmenu-tab-select', {
      detail: e.detail,
      bubbles: true,
      composed: true
    }));
  }

  // Event handlers for secondarymenu
  private handleSecondarymenuItemSelect(e: CustomEvent) {
    this.secondarymenuSelectedItem = e.detail.item;
    this.dispatchEvent(new CustomEvent('secondarymenu-item-select', {
      detail: e.detail,
      bubbles: true,
      composed: true
    }));
  }

  // Event handlers for collapse state changes
  private handleMainmenuCollapseChange(e: CustomEvent) {
    this.mainmenuCollapsed = e.detail.collapsed;
    this.dispatchEvent(new CustomEvent('mainmenu-collapse-change', {
      detail: e.detail,
      bubbles: true,
      composed: true
    }));
  }

  private handleSecondarymenuCollapseChange(e: CustomEvent) {
    this.secondarymenuCollapsed = e.detail.collapsed;
    this.dispatchEvent(new CustomEvent('secondarymenu-collapse-change', {
      detail: e.detail,
      bubbles: true,
      composed: true
    }));
  }
}