dees-wcctools/ts_web/elements/wcc-sidebar.ts

import * as plugins from '../wcctools.plugins.js';
import { DeesElement, property, html, customElement, type TemplateResult, state } from '@design.estate/dees-element';
import { WccDashboard, getSectionItems } from './wcc-dashboard.js';
import type { TTemplateFactory } from './wcctools.helpers.js';
import { getDemoCount, hasMultipleDemos } from './wcctools.helpers.js';
import type { IWccSection, TElementType } from '../wcctools.interfaces.js';

@customElement('wcc-sidebar')
export class WccSidebar extends DeesElement {
  @property({ attribute: false })
  accessor selectedItem: DeesElement | TTemplateFactory;

  @property({ attribute: false })
  accessor selectedType: TElementType;

  @property()
  accessor dashboardRef: WccDashboard;

  @property()
  accessor isNative: boolean = false;

  // Track which elements are expanded (for multi-demo elements)
  @state()
  accessor expandedElements: Set<string> = new Set();

  // Track which sections are collapsed
  @state()
  accessor collapsedSections: Set<string> = new Set();

  // Search query for filtering sidebar items
  @property()
  accessor searchQuery: string = '';

  private sectionsInitialized = false;

  public render(): TemplateResult {
    return html`
      <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet" />
      <style>
        :host {
          /* CSS Variables - Always dark theme to match wcc-properties */
          --background: #0a0a0a;
          --foreground: #e5e5e5;
          --card: #0f0f0f;
          --card-foreground: #f0f0f0;
          --muted: #1a1a1a;
          --muted-foreground: #666;
          --accent: #222;
          --accent-foreground: #fff;
          --border: rgba(255, 255, 255, 0.06);
          --input: #141414;
          --primary: #3b82f6;
          --primary-foreground: #fff;
          --ring: #3b82f6;
          --radius: 4px;

          display: ${this.isNative ? 'none' : 'block'};
          border-right: 1px solid rgba(255, 255, 255, 0.08);
          font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
          font-size: 14px;
          box-sizing: border-box;
          position: absolute;
          left: 0px;
          width: 200px;
          top: 0px;
          bottom: 0px;
          overflow-y: auto;
          overflow-x: hidden;
          background: var(--background);
          color: var(--foreground);
        }

        .menu {
          padding: 0.5rem 0;
        }

        .section-header {
          padding: 0.3rem 0.75rem;
          font-size: 0.65rem;
          font-weight: 500;
          text-transform: uppercase;
          letter-spacing: 0.08em;
          color: #888;
          margin: 0;
          margin-top: 0.5rem;
          background: rgba(59, 130, 246, 0.03);
          border-bottom: 1px solid var(--border);
          border-top: 1px solid var(--border);
          display: flex;
          align-items: center;
          gap: 0.5rem;
          cursor: pointer;
          user-select: none;
          transition: all 0.15s ease;
        }

        .section-header:first-child {
          margin-top: 0;
        }

        .section-header:hover {
          background: rgba(59, 130, 246, 0.08);
        }

        .section-header .expand-icon {
          font-size: 14px;
          opacity: 0.5;
          transition: transform 0.2s ease;
        }

        .section-header.collapsed .expand-icon {
          transform: rotate(-90deg);
        }

        .section-header .section-icon {
          font-size: 14px;
          opacity: 0.6;
        }

        .section-content {
          overflow: hidden;
        }

        .section-content.collapsed {
          display: none;
        }

        .material-symbols-outlined {
          font-family: 'Material Symbols Outlined';
          font-weight: normal;
          font-style: normal;
          font-size: 16px;
          display: inline-block;
          line-height: 1;
          text-transform: none;
          letter-spacing: normal;
          word-wrap: normal;
          white-space: nowrap;
          direction: ltr;
          font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
          opacity: 0.5;
        }

        .selectOption {
          user-select: none;
          position: relative;
          margin: 0.125rem 0.5rem;
          padding: 0.5rem 0.75rem;
          transition: all 0.15s ease;
          display: grid;
          grid-template-columns: 20px 1fr;
          align-items: center;
          gap: 0.5rem;
          border-radius: var(--radius);
          cursor: pointer;
          font-size: 0.75rem;
          color: #999;
          background: transparent;
        }

        .selectOption.folder {
          grid-template-columns: 16px 20px 1fr;
        }

        .selectOption .expand-icon {
          font-size: 14px;
          opacity: 0.5;
          transition: transform 0.2s ease;
        }

        .selectOption.expanded .expand-icon {
          transform: rotate(90deg);
        }

        .selectOption:hover {
          background: rgba(59, 130, 246, 0.05);
          color: #bbb;
        }

        .selectOption:hover .material-symbols-outlined {
          opacity: 0.7;
        }

        .selectOption.selected {
          background: rgba(59, 130, 246, 0.15);
          color: var(--primary);
        }

        .selectOption.selected .material-symbols-outlined {
          opacity: 1;
          font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }

        .selectOption.selected:hover {
          background: rgba(59, 130, 246, 0.2);
          color: var(--primary);
        }

        .selectOption .text {
          display: block;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-weight: 400;
        }

        .demo-children {
          margin-left: 1rem;
          overflow: hidden;
        }

        .demo-child {
          user-select: none;
          position: relative;
          margin: 0.125rem 0.5rem;
          padding: 0.35rem 0.75rem;
          transition: all 0.15s ease;
          display: grid;
          grid-template-columns: 16px 1fr;
          align-items: center;
          gap: 0.5rem;
          border-radius: var(--radius);
          cursor: pointer;
          font-size: 0.7rem;
          color: #777;
          background: transparent;
        }

        .demo-child:hover {
          background: rgba(59, 130, 246, 0.05);
          color: #bbb;
        }

        .demo-child.selected {
          background: rgba(59, 130, 246, 0.15);
          color: var(--primary);
        }

        .demo-child .material-symbols-outlined {
          font-size: 14px;
        }

        ::-webkit-scrollbar {
          width: 8px;
        }

        ::-webkit-scrollbar-track {
          background: transparent;
        }

        ::-webkit-scrollbar-thumb {
          background: rgba(255, 255, 255, 0.1);
          border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
          background: rgba(255, 255, 255, 0.2);
        }

        .search-container {
          padding: 0.5rem;
          border-bottom: 1px solid var(--border);
        }

        .search-input {
          width: 100%;
          box-sizing: border-box;
          background: var(--input);
          border: 1px solid var(--border);
          border-radius: var(--radius);
          padding: 0.5rem 0.75rem;
          color: var(--foreground);
          font-size: 0.75rem;
          font-family: inherit;
          outline: none;
          transition: border-color 0.15s ease;
        }

        .search-input:focus {
          border-color: var(--primary);
        }

        .search-input::placeholder {
          color: var(--muted-foreground);
        }

        .highlight {
          background: rgba(59, 130, 246, 0.3);
          border-radius: 2px;
        }
      </style>
      <div class="search-container">
        <input
          type="text"
          class="search-input"
          placeholder="Search..."
          .value=${this.searchQuery}
          @input=${this.handleSearchInput}
        />
      </div>
      <div class="menu">
        ${this.renderSections()}
      </div>
    `;
  }

  /**
   * Initialize collapsed sections from section config
   */
  private initCollapsedSections() {
    if (this.sectionsInitialized) return;

    const collapsed = new Set<string>();
    for (const section of this.dashboardRef.sections) {
      if (section.collapsed) {
        collapsed.add(section.name);
      }
    }
    this.collapsedSections = collapsed;
    this.sectionsInitialized = true;
  }

  /**
   * Render all sections
   */
  private renderSections() {
    this.initCollapsedSections();

    return this.dashboardRef.sections.map((section, index) => {
      // Check if section has any matching items
      const entries = getSectionItems(section);
      const filteredEntries = entries.filter(([name]) => this.matchesSearch(name));

      // Hide section if no items match the search
      if (filteredEntries.length === 0 && this.searchQuery) {
        return null;
      }

      const isCollapsed = this.collapsedSections.has(section.name);
      const sectionIcon = section.icon || (section.type === 'pages' ? 'insert_drive_file' : 'widgets');

      return html`
        <div
          class="section-header ${isCollapsed ? 'collapsed' : ''}"
          @click=${() => this.toggleSectionCollapsed(section.name)}
        >
          <i class="material-symbols-outlined expand-icon">expand_more</i>
          ${section.icon ? html`<i class="material-symbols-outlined section-icon">${section.icon}</i>` : null}
          <span>${section.name}</span>
        </div>
        <div class="section-content ${isCollapsed ? 'collapsed' : ''}">
          ${this.renderSectionItems(section)}
        </div>
      `;
    });
  }

  /**
   * Render items for a section
   */
  private renderSectionItems(section: IWccSection) {
    const entries = getSectionItems(section);
    // Filter entries by search query
    const filteredEntries = entries.filter(([name]) => this.matchesSearch(name));

    if (section.type === 'pages') {
      return filteredEntries.map(([pageName, item]) => {
        return html`
          <div
            class="selectOption ${this.selectedItem === item ? 'selected' : ''}"
            @click=${async () => {
              await plugins.deesDomtools.DomTools.setupDomTools();
              this.selectItem('page', pageName, item, 0, section);
            }}
          >
            <i class="material-symbols-outlined">insert_drive_file</i>
            <div class="text">${this.highlightMatch(pageName)}</div>
          </div>
        `;
      });
    } else {
      // type === 'elements'
      return filteredEntries.map(([elementName, item]) => {
        const anonItem = item as any;
        const demoCount = anonItem.demo ? getDemoCount(anonItem.demo) : 0;
        const isMultiDemo = anonItem.demo && hasMultipleDemos(anonItem.demo);
        const isExpanded = this.expandedElements.has(elementName);
        const isSelected = this.selectedItem === item;

        if (isMultiDemo) {
          // Multi-demo element - render as expandable folder
          return html`
            <div
              class="selectOption folder ${isExpanded ? 'expanded' : ''} ${isSelected ? 'selected' : ''}"
              @click=${() => this.toggleExpanded(elementName)}
            >
              <i class="material-symbols-outlined expand-icon">chevron_right</i>
              <i class="material-symbols-outlined">folder</i>
              <div class="text">${this.highlightMatch(elementName)}</div>
            </div>
            ${isExpanded ? html`
              <div class="demo-children">
                ${Array.from({ length: demoCount }, (_, i) => {
                  const demoIndex = i;
                  const isThisDemoSelected = isSelected && this.dashboardRef.selectedDemoIndex === demoIndex;
                  return html`
                    <div
                      class="demo-child ${isThisDemoSelected ? 'selected' : ''}"
                      @click=${async () => {
                        await plugins.deesDomtools.DomTools.setupDomTools();
                        this.selectItem('element', elementName, item, demoIndex, section);
                      }}
                    >
                      <i class="material-symbols-outlined">play_circle</i>
                      <div class="text">demo${demoIndex + 1}</div>
                    </div>
                  `;
                })}
              </div>
            ` : null}
          `;
        } else {
          // Single demo element
          return html`
            <div
              class="selectOption ${isSelected ? 'selected' : ''}"
              @click=${async () => {
                await plugins.deesDomtools.DomTools.setupDomTools();
                this.selectItem('element', elementName, item, 0, section);
              }}
            >
              <i class="material-symbols-outlined">featured_video</i>
              <div class="text">${this.highlightMatch(elementName)}</div>
            </div>
          `;
        }
      });
    }
  }

  private toggleSectionCollapsed(sectionName: string) {
    const newSet = new Set(this.collapsedSections);
    if (newSet.has(sectionName)) {
      newSet.delete(sectionName);
    } else {
      newSet.add(sectionName);
    }
    this.collapsedSections = newSet;
  }

  private toggleExpanded(elementName: string) {
    const newSet = new Set(this.expandedElements);
    if (newSet.has(elementName)) {
      newSet.delete(elementName);
    } else {
      newSet.add(elementName);
    }
    this.expandedElements = newSet;
  }

  private handleSearchInput(e: Event) {
    const input = e.target as HTMLInputElement;
    this.searchQuery = input.value;
    this.dispatchEvent(new CustomEvent('searchChanged', { detail: this.searchQuery }));
  }

  private matchesSearch(name: string): boolean {
    if (!this.searchQuery) return true;
    return name.toLowerCase().includes(this.searchQuery.toLowerCase());
  }

  private highlightMatch(text: string): TemplateResult {
    if (!this.searchQuery) return html`${text}`;
    const lowerText = text.toLowerCase();
    const lowerQuery = this.searchQuery.toLowerCase();
    const index = lowerText.indexOf(lowerQuery);
    if (index === -1) return html`${text}`;
    const before = text.slice(0, index);
    const match = text.slice(index, index + this.searchQuery.length);
    const after = text.slice(index + this.searchQuery.length);
    return html`${before}<span class="highlight">${match}</span>${after}`;
  }

  protected updated(changedProperties: Map<string, unknown>) {
    super.updated(changedProperties);

    // Auto-expand folder when a multi-demo element is selected
    if (changedProperties.has('selectedItem') && this.selectedItem) {
      // Find the element in any section
      for (const section of this.dashboardRef.sections) {
        if (section.type !== 'elements') continue;

        const entries = getSectionItems(section);
        const found = entries.find(([_, item]) => item === this.selectedItem);
        if (found) {
          const [elementName, item] = found;
          const anonItem = item as any;
          if (anonItem.demo && hasMultipleDemos(anonItem.demo)) {
            if (!this.expandedElements.has(elementName)) {
              const newSet = new Set(this.expandedElements);
              newSet.add(elementName);
              this.expandedElements = newSet;
            }
          }
          break;
        }
      }
    }
  }

  public selectItem(
    typeArg: TElementType,
    itemNameArg: string,
    itemArg: TTemplateFactory | DeesElement,
    demoIndex: number = 0,
    section?: IWccSection
  ) {
    console.log('selected item');
    console.log(itemNameArg);
    console.log(itemArg);
    console.log('demo index:', demoIndex);
    console.log('section:', section?.name);

    this.selectedItem = itemArg;
    this.selectedType = typeArg;
    this.dashboardRef.selectedDemoIndex = demoIndex;

    // Set the selected section on dashboard
    if (section) {
      this.dashboardRef.selectedSection = section;
    }

    this.dispatchEvent(
      new CustomEvent('selectedType', {
        detail: typeArg
      })
    );
    this.dispatchEvent(
      new CustomEvent('selectedItemName', {
        detail: itemNameArg
      })
    );
    this.dispatchEvent(
      new CustomEvent('selectedItem', {
        detail: itemArg
      })
    );

    this.dashboardRef.buildUrl();

    // Force re-render to update demo child selection indicator
    this.requestUpdate();
  }
}