dees-catalog/ts_web/elements/dees-appui-maincontent.ts

import * as interfaces from './interfaces/index.js';

import {
  DeesElement,
  type TemplateResult,
  property,
  customElement,
  html,
  css,
  cssManager,
} from '@design.estate/dees-element';

import * as domtools from '@design.estate/dees-domtools';
import './dees-appui-tabs.js';
import type { DeesAppuiTabs } from './dees-appui-tabs.js';

@customElement('dees-appui-maincontent')
export class DeesAppuiMaincontent extends DeesElement {
  public static demo = () => html`
    <dees-appui-maincontent
      .tabs=${[
        { key: 'Overview', iconName: 'lucide:home', action: () => console.log('Overview') },
        { key: 'Details', iconName: 'lucide:file', action: () => console.log('Details') },
        { key: 'Settings', iconName: 'lucide:settings', action: () => console.log('Settings') },
      ]}
    >
      <div slot="content" style="padding: 40px; color: #ccc;">
        <h1>Main Content Area</h1>
        <p>This is where your application content goes.</p>
      </div>
    </dees-appui-maincontent>
  `;

  // INSTANCE
  @property({
    type: Array,
  })
  public tabs: interfaces.ITab[] = [
    { key: '⚠️ Please set tabs', action: () => console.warn('No tabs configured for maincontent') },
  ];

  @property({ type: Object })
  public selectedTab: interfaces.ITab | null = null;

  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
        color: ${cssManager.bdTheme('#333', '#fff')};
        display: block;
        width: 100%;
        height: 100%;
        position: relative;
        background: ${cssManager.bdTheme('#ffffff', '#161616')};
      }
      .maincontainer {
        position: absolute;
        height: 100%;
        right: 0px;
        top: 0px;
        width: 100%;
      }

      .topbar {
        position: absolute;
        width: 100%;
        user-select: none;
      }

      .content-area {
        position: absolute;
        top: 60px;
        left: 0;
        right: 0;
        bottom: 0;
        overflow: auto;
      }
    `,
  ];

  public render(): TemplateResult {
    return html`
      <div class="maincontainer">
        <div class="topbar">
          <dees-appui-tabs
            .tabs=${this.tabs}
            .selectedTab=${this.selectedTab}
            .showTabIndicator=${true}
            .tabStyle=${'horizontal'}
            @tab-select=${(e: CustomEvent) => this.handleTabSelect(e)}
          ></dees-appui-tabs>
        </div>
        <div class="content-area">
          <slot></slot>
          <slot name="content"></slot>
        </div>
      </div>
    `;
  }

  private handleTabSelect(e: CustomEvent) {
    this.selectedTab = e.detail.tab;
    
    // Re-emit the event
    this.dispatchEvent(new CustomEvent('tab-select', {
      detail: e.detail,
      bubbles: true,
      composed: true
    }));
  }

  async firstUpdated(_changedProperties: Map<string | number | symbol, unknown>) {
    await super.firstUpdated(_changedProperties);
    // Tab selection is now handled by the dees-appui-tabs component
    // But we need to ensure the tabs component is ready
    const tabsComponent = this.shadowRoot.querySelector('dees-appui-tabs') as DeesAppuiTabs;
    if (tabsComponent) {
      await tabsComponent.updateComplete;
    }
  }
}