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: (children: HTMLCollection) => 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));
    
    // Get all slotted elements
    const slottedElements = this.children;
    if (slottedElements.length > 0 && this.runAfterRender) {
      // Call the runAfterRender function with all slotted elements
      try {
        await this.runAfterRender(slottedElements);
      } catch (error) {
        console.error('Error in runAfterRender:', error);
      }
    }
  }
}