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 { ASYNC } from '@shared/ui/async/async.component';
import { BigProfileStore } from '@registratie/application/big-profile.store';
import { RegistrationTableComponent } from '@registratie/ui/registration-table/registration-table.component';

/** Section: "Specialismen en aantekeningen" — a separate resource from the rest of
    the dashboard (own load/empty/error state), because it is genuinely a second
    endpoint (`big-register.adapter.ts`), not part of the BFF-lite view call. */
@Component({
  selector: 'app-specialismen-section',
  imports: [HeadingComponent, SkeletonComponent, RegistrationTableComponent, ...ASYNC],
  template: `
    <section>
      <app-heading [level]="2" i18n="@@dashboard.specialismen"
        >Specialismen en aantekeningen</app-heading
      >
      <div class="app-section">
        <app-async [data]="store.aantekeningen()" (retryClicked)="store.reloadAantekeningen()">
          <ng-template appAsyncLoaded>
            @if (aantekeningen(); as r) {
              <app-registration-table [rows]="r" />
            }
          </ng-template>
          <ng-template appAsyncLoading>
            <app-skeleton height="2.5rem" [count]="3" />
          </ng-template>
          <ng-template appAsyncEmpty>
            <p class="app-text-subtle" i18n="@@dashboard.geenSpecialismen">
              U heeft nog geen specialismen of aantekeningen.
            </p>
          </ng-template>
        </app-async>
      </div>
    </section>
  `,
})
export class SpecialismenSection {
  protected store = inject(BigProfileStore);
  protected aantekeningen = () => successOf(this.store.aantekeningen());
}