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

import { DeesElement, property, html, customElement, type TemplateResult, state } from '@design.estate/dees-element';
import { WccDashboard } from './wcc-dashboard.js';

export type TPropertyType = 'String' | 'Number' | 'Boolean' | 'Object' | 'Enum' | 'Array';

export type TEnvironment = 'native' | 'desktop' | 'tablet' | 'phablet' | 'phone';
export type TTheme = 'bright' | 'dark';

let environment: TEnvironment = 'native';

export const setEnvironment = (envArg) => {
  environment = envArg;
};

@customElement('wcc-properties')
export class WccProperties extends DeesElement {
  @property({
    type: WccDashboard
  })
  public dashboardRef: WccDashboard;

  @property()
  public selectedItem: (() => TemplateResult) | DeesElement;

  @property()
  public selectedViewport: TEnvironment = 'native';

  @property()
  public selectedTheme: TTheme = 'dark';

  @property()
  public warning: string = null;

  @state()
  propertyContent: TemplateResult[] = [];

  public render(): TemplateResult {
    return html`
      <style>
        :host {
          /* CSS Variables - Always dark theme */
          --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;
          --radius-sm: 2px;
          --radius-md: 4px;
          --radius-lg: 6px;

          /* Base styles */
          font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
          box-sizing: border-box;
          position: absolute;
          left: 200px;
          height: 88px;
          bottom: 0px;
          right: 0px;
          overflow: hidden;
          background: var(--background);
          color: var(--foreground);
          border-top: 1px solid rgba(255, 255, 255, 0.08);
        }
        .grid {
          display: grid;
          grid-template-columns: 1fr 150px 300px 70px;
          height: 100%;
        }
        .properties {
          background: transparent;
          overflow-y: auto;
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          border-right: 1px solid var(--border);
        }

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

        .properties .property {
          padding: 0.4rem;
          background: transparent;
          border-right: 1px solid var(--border);
          border-bottom: 1px solid var(--border);
          transition: all 0.15s ease;
        }
        
        .properties .property:hover {
          background: rgba(255, 255, 255, 0.02);
        }
        
        .properties .property-label {
          font-size: 0.65rem;
          font-weight: 400;
          color: #888;
          margin-bottom: 0.2rem;
          text-transform: capitalize;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .properties input[type="text"],
        .properties input[type="number"],
        .properties select {
          display: block;
          width: 100%;
          padding: 0.25rem 0.4rem;
          background: var(--input);
          border: 1px solid transparent;
          color: var(--foreground);
          border-radius: var(--radius-sm);
          font-size: 0.7rem;
          transition: all 0.15s ease;
          outline: none;
        }
        
        .properties input[type="text"]:focus,
        .properties input[type="number"]:focus,
        .properties select:focus {
          border-color: var(--primary);
          background: rgba(59, 130, 246, 0.1);
        }
        
        .properties input[type="checkbox"] {
          width: 1rem;
          height: 1rem;
          cursor: pointer;
          accent-color: var(--primary);
        }

        .viewportSelector,
        .themeSelector {
          user-select: none;
          background: transparent;
          display: flex;
          flex-direction: column;
          border-right: 1px solid var(--border);
        }
        .selectorButtons2 {
          display: grid;
          grid-template-columns: 1fr 1fr;
          flex: 1;
        }
        .selectorButtons4 {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          flex: 1;
        }
        .button {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          padding: 0.5rem 0.25rem;
          text-align: center;
          background: transparent;
          border: 1px solid var(--border);
          transition: all 0.15s ease;
          cursor: pointer;
          font-size: 0.65rem;
          gap: 0.2rem;
          color: #999;
        }
        
        .button:hover {
          background: rgba(59, 130, 246, 0.05);
          color: #bbb;
        }

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

        .button.selected:hover {
          background: rgba(59, 130, 246, 0.2);
        }
        
        .button .material-symbols-outlined {
          font-size: 18px;
          font-variation-settings: 'FILL' 0, 'wght' 300;
        }
        
        .button.selected .material-symbols-outlined {
          font-variation-settings: 'FILL' 1, 'wght' 400;
        }

        .panelheading {
          padding: 0.3rem 0.5rem;
          font-weight: 500;
          font-size: 0.65rem;
          background: rgba(59, 130, 246, 0.03);
          border-bottom: 1px solid var(--border);
          color: #888;
          text-transform: uppercase;
          letter-spacing: 0.08em;
        }
        .docs {
          display: flex;
          align-items: center;
          justify-content: center;
          text-transform: uppercase;
          background: transparent;
          cursor: pointer;
          font-size: 0.65rem;
          font-weight: 500;
          letter-spacing: 0.08em;
          transition: all 0.15s ease;
          color: #666;
        }

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

        .warning {
          position: absolute;
          background: rgba(20, 20, 20, 0.8);
          color: #888;
          top: 0.5rem;
          bottom: 0.5rem;
          left: 0.5rem;
          right: calc(520px + 0.5rem);
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 1.5rem;
          font-size: 0.85rem;
          border-radius: var(--radius-md);
          border: 1px solid var(--border);
          backdrop-filter: blur(8px);
        }
      </style>
      <div class="grid">
        <div class="properties">
          <div class="panelheading">Properties</div>
          ${this.propertyContent}
        </div>
        <div class="themeSelector">
          <div class="panelheading">Theme</div>
          <div class="selectorButtons2">
            <div
              class="button ${this.selectedTheme === 'dark' ? 'selected' : null}"
              @click=${() => {
                this.selectTheme('dark');
              }}
            >
              Dark<i class="material-symbols-outlined">brightness_3</i>
            </div>
            <div
              class="button ${this.selectedTheme === 'bright' ? 'selected' : null}"
              @click=${() => {
                this.selectTheme('bright');
              }}
            >
              Bright<i class="material-symbols-outlined">flare</i>
            </div>
          </div>
        </div>
        <div class="viewportSelector">
          <div class="panelheading">Viewport</div>
          <div class="selectorButtons4">
            <div
              class="button ${this.selectedViewport === 'phone' ? 'selected' : null}"
              @click=${() => {
                this.selectViewport('phone');
              }}
            >
              Phone<i class="material-symbols-outlined">smartphone</i>
            </div>
            <div
              class="button ${this.selectedViewport === 'phablet' ? 'selected' : null}"
              @click=${() => {
                this.selectViewport('phablet');
              }}
            >
              Phablet<i class="material-symbols-outlined">smartphone</i>
            </div>
            <div
              class="button ${this.selectedViewport === 'tablet' ? 'selected' : null}"
              @click=${() => {
                this.selectViewport('tablet');
              }}
            >
              Tablet<i class="material-symbols-outlined">tablet</i>
            </div>
            <div
              class="button ${this.selectedViewport === 'desktop' ||
              this.selectedViewport === 'native'
                ? 'selected'
                : null}"
              @click=${() => {
                this.selectViewport('native');
              }}
            >
              Desktop<i class="material-symbols-outlined">desktop_windows</i>
            </div>
          </div>
        </div>
        <div class="docs">Docs</div>
      </div>
      ${this.warning ? html`<div class="warning">${this.warning}</div>` : null}
    `;
  }

  private async findElementRecursively(container: Element, elementClass: any, maxDepth: number = 5): Promise<HTMLElement | null> {
    if (maxDepth <= 0) return null;
    
    try {
      // Check direct children
      for (const child of Array.from(container.children)) {
        if (child instanceof elementClass) {
          return child as HTMLElement;
        }
      }
      
      // Search in all children recursively
      for (const child of Array.from(container.children)) {
        // First, always check the light DOM children
        const found = await this.findElementRecursively(child, elementClass, maxDepth - 1);
        if (found) return found;
        
        // Also check shadow root if it exists
        if (child.shadowRoot) {
          const shadowFound = await this.findElementRecursively(child.shadowRoot as any, elementClass, maxDepth - 1);
          if (shadowFound) return shadowFound;
        }
      }
    } catch (error) {
      console.error('Error in findElementRecursively:', error);
    }
    
    return null;
  }

  public async createProperties() {
    console.log('creating properties for:');
    console.log(this.selectedItem);
    
    // Clear any previous warnings
    this.warning = null;
    const isEnumeration = (propertyArg): boolean => {
      const keys = Object.keys(propertyArg.type);
      const values = [];
      for (const key of keys) {
        let value = propertyArg.type[key];
        if (typeof value === 'number') {
          value = value.toString();
        }
        values.push(value);
      }
      for (const key of keys) {
        if (values.indexOf(key) < 0) {
          return false;
        }
      }
      return true;
    };
    const getEnumValues = (propertyArg): any[] => {
      console.log(JSON.stringify(propertyArg));
      const enumValues: any[] = [];
      Object.keys(propertyArg.type).forEach((valueArg: string) => {
        enumValues.push(valueArg);
      });
      return enumValues;
    };
    const determinePropertyType = async (propertyArg: any): Promise<TPropertyType> => {
      const typeName: any | undefined = propertyArg.type.name;
      if (typeName) {
        return typeName;
      } else {
        return Array.isArray(propertyArg)
          ? 'Array'
          : isEnumeration(propertyArg)
          ? 'Enum'
          : 'Object';
      }
    };
    if (this.selectedItem && (this.selectedItem as any).demo) {
      console.log(`Got Dees-Element for property evaluation.`);
      const anonItem: any = this.selectedItem;
      if (!anonItem) {
        this.warning = 'no element selected';
        return;
      }
      console.log(anonItem.elementProperties);
      const wccFrame = await this.dashboardRef.wccFrame;
      
      // Wait for render to complete and any demo wrappers to run
      await new Promise(resolve => setTimeout(resolve, 200));
      
      // Try to find the element with recursive search
      const viewport = await wccFrame.getViewportElement();
      let firstFoundInstantiatedElement: HTMLElement = await this.findElementRecursively(
        viewport, 
        this.selectedItem as any
      );
      
      // Retry logic if element not found
      let retries = 0;
      while (!firstFoundInstantiatedElement && retries < 5) {
        await new Promise(resolve => setTimeout(resolve, 200));
        try {
          firstFoundInstantiatedElement = await this.findElementRecursively(
            viewport,
            this.selectedItem as any
          );
        } catch (error) {
          console.error('Error during element search retry:', error);
        }
        retries++;
      }
      
      if (!firstFoundInstantiatedElement) {
        this.warning = `no first instantiated element found for >>${anonItem.name}<< after ${retries} retries`;
        this.propertyContent = [];
        return;
      }
      const classProperties: Map<string, any> = anonItem.elementProperties;
      if (!classProperties) {
        this.warning = `selected element >>${anonItem.name}<< does not expose element properties`;
        return;
      }
      this.warning = null;
      const propertyArray: TemplateResult[] = [];
      for (const key of classProperties.keys()) {
        if (key === 'goBright' || key === 'domtools') {
          continue;
        }
        try {
          const property = classProperties.get(key);
          const propertyTypeString = await determinePropertyType(property);
          propertyArray.push(
          html`
            <div class="property">
              <div class="property-label">${key} (${propertyTypeString})</div>
              ${(() => {
                switch (propertyTypeString) {
                  case 'Boolean':
                    return html`<input
                      type="checkbox"
                      ?checked=${firstFoundInstantiatedElement[key]}
                      @input="${(eventArg: any) => {
                        firstFoundInstantiatedElement[key] = eventArg.target.checked;
                      }}"
                    />`;
                  case 'String':
                    return html`<input
                      type="text"
                      .value=${firstFoundInstantiatedElement[key] || ''}
                      @input="${(eventArg: any) => {
                        firstFoundInstantiatedElement[key] = eventArg.target.value;
                      }}"
                    />`;
                  case 'Number':
                    return html`<input
                      type="number"
                      .value=${firstFoundInstantiatedElement[key] ?? ''}
                      @input="${(eventArg: any) => {
                        firstFoundInstantiatedElement[key] = parseFloat(eventArg.target.value) || 0;
                      }}"
                    />`;
                  case 'Enum':
                    const enumValues: any[] = getEnumValues(property);
                    return html`<select
                      .value=${firstFoundInstantiatedElement[key] || ''}
                      @change="${(eventArg: any) => {
                        firstFoundInstantiatedElement[key] = eventArg.target.value;
                      }}"
                    >
                      ${enumValues.map((valueArg) => {
                        return html`
                          <option
                            value="${valueArg}"
                          >
                            ${valueArg}
                          </option>
                        `;
                      })}
                    </select>`;
                }
              })()}
            </div>
          `
        );
        } catch (error) {
          console.error(`Error processing property ${key}:`, error);
          // Continue with next property even if this one fails
        }
      }
      this.propertyContent = propertyArray;
    } else {
      console.log(`Cannot extract properties of ${(this.selectedItem as any)?.name}`);
      this.warning = `You selected a page.`;
      return null;
    }
  }

  public selectTheme(themeArg: TTheme) {
    this.selectedTheme = themeArg;
    this.dispatchEvent(
      new CustomEvent('selectedTheme', {
        detail: themeArg,
      })
    );
    console.log(this.dashboardRef.selectedType);
    this.dashboardRef.buildUrl();
  }

  public async scheduleUpdate() {
    try {
      await this.createProperties();
    } catch (error) {
      console.error('Error creating properties:', error);
      // Clear property content on error to show clean state
      this.propertyContent = [];
    }
    // Always call super.scheduleUpdate to ensure component updates
    super.scheduleUpdate();
  }

  public selectViewport(viewport: TEnvironment) {
    this.selectedViewport = viewport;
    setEnvironment(viewport);
    this.dispatchEvent(
      new CustomEvent('selectedViewport', {
        detail: viewport,
      })
    );
    this.dashboardRef.buildUrl();
  }
}