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

@customElement('dees-demowrapper')
export class DeesDemoWrapper extends DeesElement {
  @property({ attribute: false })
  public runAfterRender: (element: HTMLElement) => void | Promise<void>;

  public static styles = [
    css`
      :host {
        display: contents;
      }
    `
  ];

  public render(): TemplateResult {
    return html`
      <slot></slot>
    `;
  }

  public async firstUpdated() {
    await this.updateComplete;
    
    // Wait a bit for slotted content to render
    await new Promise(resolve => setTimeout(resolve, 50));
    
    // Find the first element child (excluding text nodes)
    const slottedElements = this.children;
    if (slottedElements.length > 0 && this.runAfterRender) {
      const firstElement = slottedElements[0] as HTMLElement;
      
      // Call the runAfterRender function with the element
      try {
        await this.runAfterRender(firstElement);
      } catch (error) {
        console.error('Error in runAfterRender:', error);
      }
    }
  }
}