import { Component, inject } from '@angular/core';
import { successOf } from '@shared/application/remote-data';
import { HeadingComponent } from '@shared/ui/heading/heading.component';
import { SkeletonComponent } from '@shared/ui/skeleton/skeleton.component';
import { DataBlockComponent } from '@shared/ui/data-block/data-block.component';
import { DataRowComponent } from '@shared/ui/data-row/data-row.component';
import { ASYNC } from '@shared/ui/async/async.component';
import { BigProfileStore } from '@registratie/application/big-profile.store';
import { RegistrationSummaryComponent } from '@registratie/ui/registration-summary/registration-summary.component';

/** Section: "Mijn registratie" — the BIG-register summary plus the BRP
    persoonsgegevens, both from the one screen-shaped dashboard call
    (BigProfileStore). */
@Component({
  selector: 'app-mijn-registratie-section',
  imports: [
    HeadingComponent,
    SkeletonComponent,
    DataBlockComponent,
    DataRowComponent,
    RegistrationSummaryComponent,
    ...ASYNC,
  ],
  template: `
    <app-async [data]="store.profile()" (retryClicked)="store.reloadProfile()">
      <ng-template appAsyncLoaded>
        @if (profile(); as p) {
          <section>
            <app-heading [level]="2" i18n="@@dashboard.mijnRegistratie"
              >Mijn registratie</app-heading
            >
            <div class="app-section">
              <app-registration-summary [reg]="p.registration" />
            </div>
            <app-data-block
              class="app-section"
              i18n-heading="@@dashboard.persoonsgegevens"
              heading="Persoonsgegevens (BRP)"
            >
              <div
                app-data-row
                i18n-key="@@dashboard.straat"
                key="Straat"
                [value]="p.person.adres.straat"
              ></div>
              <div
                app-data-row
                i18n-key="@@dashboard.postcode"
                key="Postcode"
                [value]="p.person.adres.postcode"
              ></div>
              <div
                app-data-row
                i18n-key="@@dashboard.woonplaats"
                key="Woonplaats"
                [value]="p.person.adres.woonplaats"
              ></div>
            </app-data-block>
          </section>
        }
      </ng-template>
      <ng-template appAsyncLoading>
        <app-skeleton height="2.5rem" [count]="4" />
      </ng-template>
    </app-async>
  `,
})
export class MijnRegistratieSection {
  protected store = inject(BigProfileStore);
  protected profile = () => successOf(this.store.profile());
}