import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { NgComponentOutlet } from '@angular/common';
import { PageRenderModel } from '../../dynamic-renderer/page-renderer/page-renderer.model';
import { WidgetRenderNode } from '../../dynamic-renderer/widget-host/widget-host.model';
import { WidgetHostService } from '../../dynamic-renderer/widget-host/widget-host.service';

@Component({
  selector: 'app-dynamic-page-layout',
  standalone: true,
  imports: [CommonModule, NgComponentOutlet],
  template: `
    @if (model) {
      <main class="dynamic-page-layout" [attr.data-layout]="model.layout">
        @for (section of model.sections; track section.id) {
          <section class="dynamic-section" [attr.data-section-type]="section.type">
            @for (widget of section.widgets; track widget.id) {
              <div class="dynamic-widget" [attr.data-widget-type]="widget.type">
                @if (resolveWidget(widget); as resolved) {
                  <ng-container *ngComponentOutlet="resolved.component; inputs: resolved.props"></ng-container>
                }
              </div>
            }
          </section>
        }
      </main>
    }
  `,
  styles: [
    `
      .dynamic-page-layout { display: grid; gap: 1rem; }
      .dynamic-section { display: grid; gap: 1rem; }
    `
  ],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class DynamicPageLayoutComponent {
  @Input() model: PageRenderModel | null = null;

  constructor(private readonly widgetHost: WidgetHostService) {}

  resolveWidget(widget: WidgetRenderNode) {
    return this.widgetHost.resolveWidget(widget.source);
  }
}