import { Component, inject } from '@angular/core';
import { PageShellComponent } from '@shared/layout/page-shell/page-shell.component';
import { SkeletonComponent } from '@shared/ui/skeleton/skeleton.component';
import { ASYNC } from '@shared/ui/async/async.component';
import { RegistrationSummaryComponent } from '@registratie/ui/registration-summary/registration-summary.component';
import { ChangeRequestFormComponent } from '@registratie/ui/change-request-form/change-request-form.component';
import { BigProfileStore } from '@registratie/application/big-profile.store';

@Component({
  selector: 'app-registration-detail-page',
  imports: [
    PageShellComponent, SkeletonComponent, ...ASYNC,
    RegistrationSummaryComponent, ChangeRequestFormComponent,
  ],
  template: `
    <app-page-shell i18n-heading="@@registratieDetail.heading" heading="Mijn gegevens" backLink="/dashboard">
      <app-async [data]="store.profile()">
        <ng-template appAsyncLoaded let-p>
          <app-registration-summary [reg]="$any(p).registration" />
        </ng-template>
        <ng-template appAsyncLoading>
          <app-skeleton height="2.5rem" [count]="6" />
        </ng-template>
      </app-async>

      <div class="app-section">
        <app-change-request-form />
      </div>
    </app-page-shell>
  `,
})
export class RegistrationDetailPage {
  protected store = inject(BigProfileStore);
}
