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: (wrapperElement: DeesDemoWrapper) => 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));
    
    // Check if there are slotted elements and runAfterRender is defined
    if (this.children.length > 0 && this.runAfterRender) {
      // Call the runAfterRender function with the wrapper element itself
      // Note: querySelector/querySelectorAll will work on slotted content
      // because slotted elements remain in the light DOM as children
      try {
        await this.runAfterRender(this);
      } catch (error) {
        console.error('Error in runAfterRender:', error);
      }
    }
  }
}