import { Component, inject } from '@angular/core';
import { AsyncPipe } from '@angular/common';
import { PageLayoutComponent } from '../../templates/page-layout/page-layout.component';
import { HeadingComponent } from '../../atoms/heading/heading.component';
import { LinkComponent } from '../../atoms/link/link.component';
import { RegistrationSummaryComponent } from '../../organisms/registration-summary/registration-summary.component';
import { RegistrationTableComponent } from '../../organisms/registration-table/registration-table.component';
import { RegistrationService } from '../../core/registration.service';

@Component({
  selector: 'app-dashboard-page',
  imports: [AsyncPipe, PageLayoutComponent, HeadingComponent, LinkComponent, RegistrationSummaryComponent, RegistrationTableComponent],
  template: `
    <app-page-layout>
      <app-heading [level]="1">Mijn BIG-registratie</app-heading>

      @if (reg$ | async; as reg) {
        <app-registration-summary [reg]="reg" />
      }

      <div style="margin-top:2rem">
        <app-heading [level]="2">Specialismen en aantekeningen</app-heading>
        @if (notes$ | async; as notes) {
          <app-registration-table [rows]="notes" />
        }
      </div>

      <p style="margin-top:2rem">
        <app-link to="/registratie">Gegevens bekijken of een wijziging doorgeven →</app-link>
      </p>
    </app-page-layout>
  `,
})
export class DashboardPage {
  private svc = inject(RegistrationService);
  reg$ = this.svc.getRegistration();
  notes$ = this.svc.getAantekeningen();
}