dees-catalog/ts_web/elements/dees-appui-base.demo.ts

import { html, css } from '@design.estate/dees-element';
import type { DeesAppuiBase } from './dees-appui-base.js';
import type { IAppBarMenuItem } from './interfaces/appbarmenuitem.js';
import type { ITab } from './interfaces/tab.js';
import type { ISelectionOption } from './interfaces/selectionoption.js';
import '@design.estate/dees-wcctools/demotools';

export const demoFunc = () => {
  // Menu items for the appbar
  const menuItems: IAppBarMenuItem[] = [
    {
      name: 'File',
      action: async () => {},
      submenu: [
        { name: 'New Project', shortcut: 'Cmd+N', iconName: 'filePlus', action: async () => console.log('New project') },
        { name: 'Open Project...', shortcut: 'Cmd+O', iconName: 'folderOpen', action: async () => console.log('Open project') },
        { name: 'Recent Projects', action: async () => {}, submenu: [
          { name: 'my-app', action: async () => console.log('Open my-app') },
          { name: 'component-lib', action: async () => console.log('Open component-lib') },
          { name: 'api-server', action: async () => console.log('Open api-server') },
        ]},
        { divider: true },
        { name: 'Save All', shortcut: 'Cmd+Shift+S', iconName: 'save', action: async () => console.log('Save all') },
        { divider: true },
        { name: 'Close Project', action: async () => console.log('Close project') },
      ]
    },
    {
      name: 'Edit',
      action: async () => {},
      submenu: [
        { name: 'Undo', shortcut: 'Cmd+Z', iconName: 'undo', action: async () => console.log('Undo') },
        { name: 'Redo', shortcut: 'Cmd+Shift+Z', iconName: 'redo', action: async () => console.log('Redo') },
        { divider: true },
        { name: 'Cut', shortcut: 'Cmd+X', iconName: 'scissors', action: async () => console.log('Cut') },
        { name: 'Copy', shortcut: 'Cmd+C', iconName: 'copy', action: async () => console.log('Copy') },
        { name: 'Paste', shortcut: 'Cmd+V', iconName: 'clipboard', action: async () => console.log('Paste') },
      ]
    },
    {
      name: 'View',
      action: async () => {},
      submenu: [
        { name: 'Toggle Sidebar', shortcut: 'Cmd+B', action: async () => console.log('Toggle sidebar') },
        { name: 'Toggle Terminal', shortcut: 'Cmd+J', iconName: 'terminal', action: async () => console.log('Toggle terminal') },
        { divider: true },
        { name: 'Zoom In', shortcut: 'Cmd++', iconName: 'zoomIn', action: async () => console.log('Zoom in') },
        { name: 'Zoom Out', shortcut: 'Cmd+-', iconName: 'zoomOut', action: async () => console.log('Zoom out') },
        { name: 'Reset Zoom', shortcut: 'Cmd+0', action: async () => console.log('Reset zoom') },
      ]
    },
    {
      name: 'Help',
      action: async () => {},
      submenu: [
        { name: 'Documentation', iconName: 'book', action: async () => console.log('Documentation') },
        { name: 'Release Notes', iconName: 'fileText', action: async () => console.log('Release notes') },
        { divider: true },
        { name: 'Report Issue', iconName: 'bug', action: async () => console.log('Report issue') },
        { name: 'About', iconName: 'info', action: async () => console.log('About') },
      ]
    }
  ];

  // Main menu tabs (left sidebar)
  const mainMenuTabs: ITab[] = [
    { key: 'dashboard', iconName: 'home', action: () => console.log('Dashboard selected') },
    { key: 'projects', iconName: 'folder', action: () => console.log('Projects selected') },
    { key: 'analytics', iconName: 'lineChart', action: () => console.log('Analytics selected') },
    { key: 'settings', iconName: 'settings', action: () => console.log('Settings selected') },
  ];

  // Selector options (second sidebar)
  const selectorOptions: ISelectionOption[] = [
    { key: 'Overview', action: () => console.log('Overview selected') },
    { key: 'Components', action: () => console.log('Components selected') },
    { key: 'Services', action: () => console.log('Services selected') },
    { key: 'Database', action: () => console.log('Database selected') },
    { key: 'Settings', action: () => console.log('Settings selected') },
  ];

  // Main content tabs
  const mainContentTabs: ITab[] = [
    { key: 'Details', iconName: 'file', action: () => console.log('Details tab') },
    { key: 'Logs', iconName: 'list', action: () => console.log('Logs tab') },
    { key: 'Metrics', iconName: 'lineChart', action: () => console.log('Metrics tab') },
  ];

  return html`
    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
      const appuiBase = elementArg.querySelector('dees-appui-base') as DeesAppuiBase;
      
      // Add event listeners for theme toggle
      const themeButtons = elementArg.querySelectorAll('.theme-toggle dees-button');
      themeButtons[0].addEventListener('click', () => {
        if (appuiBase.appbar) {
          appuiBase.appbar.theme = 'dark';
        }
      });
      themeButtons[1].addEventListener('click', () => {
        if (appuiBase.appbar) {
          appuiBase.appbar.theme = 'light';
        }
      });

      // Update breadcrumbs dynamically
      const updateBreadcrumbs = (path: string) => {
        if (appuiBase.appbar) {
          appuiBase.appbar.breadcrumbs = path;
        }
      };

      // Simulate navigation
      setTimeout(() => {
        updateBreadcrumbs('Dashboard > Overview');
      }, 2000);

      setTimeout(() => {
        updateBreadcrumbs('Dashboard > Projects > my-app > src > index.ts');
      }, 4000);
    }}>
      <style>
        ${css`
        .demo-container {
          position: relative;
          height: 100vh;
          width: 100%;
          overflow: hidden;
        }
        
        .controls {
          position: absolute;
          bottom: 20px;
          right: 20px;
          z-index: 1000;
          background: rgba(0, 0, 0, 0.8);
          padding: 16px;
          border-radius: 8px;
          display: flex;
          gap: 12px;
        }
        
        .control-group {
          display: flex;
          flex-direction: column;
          gap: 8px;
        }
        
        .control-group label {
          font-size: 12px;
          color: #888;
        }
      `}
      </style>
      
      <div class="demo-container">
        <dees-appui-base
          .appbarMenuItems=${menuItems}
          .appbarBreadcrumbs=${'Dashboard'}
          .appbarTheme=${'dark'}
          .appbarUser=${{
            name: 'Jane Smith',
            status: 'online' as 'online' | 'offline' | 'busy' | 'away'
          }}
          .appbarShowWindowControls=${true}
          .appbarShowSearch=${true}
          .mainmenuTabs=${mainMenuTabs}
          .mainselectorOptions=${selectorOptions}
          .maincontentTabs=${mainContentTabs}
          @appbar-menu-select=${(e: CustomEvent) => console.log('Menu selected:', e.detail)}
          @appbar-breadcrumb-navigate=${(e: CustomEvent) => console.log('Breadcrumb:', e.detail)}
          @appbar-search-click=${() => console.log('Search clicked')}
          @appbar-user-menu-open=${() => console.log('User menu opened')}
          @mainmenu-tab-select=${(e: CustomEvent) => console.log('Tab selected:', e.detail)}
          @mainselector-option-select=${(e: CustomEvent) => console.log('Option selected:', e.detail)}
        >
          <div slot="maincontent" style="padding: 40px; color: #ccc;">
            <h1>Application Content</h1>
            <p>This is the main content area where your application's primary interface would be displayed.</p>
            <p>The layout includes:</p>
            <ul>
              <li>App bar with menus, breadcrumbs, and user account</li>
              <li>Main menu (left sidebar) for primary navigation</li>
              <li>Selector menu (second sidebar) for sub-navigation</li>
              <li>Main content area (this section)</li>
              <li>Activity log (right sidebar)</li>
            </ul>
          </div>
        </dees-appui-base>
        
        <div class="controls">
          <div class="control-group">
            <label>Theme</label>
            <dees-button-group class="theme-toggle">
              <dees-button>Dark</dees-button>
              <dees-button>Light</dees-button>
            </dees-button-group>
          </div>
        </div>
      </div>
    </dees-demowrapper>
  `;
};