import { Component, computed, inject } from '@angular/core';
import { successOf } from '@shared/application/remote-data';
import { PageShellComponent } from '@shared/layout/page-shell/page-shell.component';
import { SkeletonComponent } from '@shared/ui/atoms/skeleton/skeleton.component';
import { ASYNC } from '@shared/ui/molecules/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>
          @if (profile(); as p) {
            <app-registration-summary [reg]="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 [brpAdres]="profile()?.person?.adres" />
      </div>
    </app-page-shell>
  `,
})
export class RegistrationDetailPage {
  protected store = inject(BigProfileStore);

  /** `successOf`: `<ng-template>` can't inherit a generic from a sibling host input,
      so the Success value is unwrapped here instead of through `let-`. */
  protected readonly profile = computed(() => successOf(this.store.profile()));
}