import { Component, OnInit, signal, ChangeDetectionStrategy } from '@angular/core';
import { Router } from '@angular/router';
import { DynamicPageLayoutComponent } from '../../layouts/containers/dynamic-page-layout.component';
import { PageRenderModel } from '../../dynamic-renderer/page-renderer/page-renderer.model';
import { WebsiteRuntimeFacade } from '../../facades/website/website-runtime.facade';
import { TranslatePipe } from '../../i18n/translate.pipe';
import { SkeletonComponent } from '../../shared/ui/skeleton/skeleton.component';
import { EmptyStateComponent } from '../../shared/ui/empty-state/empty-state.component';

@Component({
  selector: 'app-home',
  standalone: true,
  imports: [DynamicPageLayoutComponent, TranslatePipe, SkeletonComponent, EmptyStateComponent],
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class HomeComponent implements OnInit {
  constructor(
    private readonly router: Router,
    private readonly websiteRuntime: WebsiteRuntimeFacade
  ) {}

  readonly skeletonCards = [0, 1, 2, 3];
  loading = signal(true);
  error = signal<string | null>(null);
  readonly pageModel = signal<PageRenderModel | null>(null);

  ngOnInit(): void {
    this.loadHomepageSections();
  }

  private loadHomepageSections(): void {
    this.websiteRuntime.getPageRenderModelForUrl(this.router.url).subscribe({
      next: (model) => {
        this.pageModel.set(model);
        this.loading.set(false);
      },
      error: () => {
        this.pageModel.set(null);
        this.loading.set(false);
      }
    });
  }
}
