import type { Meta, StoryObj } from '@storybook/angular';
import { applicationConfig } from '@storybook/angular';
import { provideRouter } from '@angular/router';
import { AanvraagBlockComponent } from './aanvraag-block.component';
import { Aanvraag } from '@registratie/domain/aanvraag';

const base = {
  id: 'a1',
  type: 'registratie',
  documentIds: [],
  createdAt: '2026-06-28T10:00:00Z',
  updatedAt: '2026-06-28T10:05:00Z',
  submittedAt: '2026-06-28T10:05:00Z',
} satisfies Omit<Aanvraag, 'status'>;

const meta: Meta<AanvraagBlockComponent> = {
  title: 'Domein/Registratie/Aanvraag Block',
  component: AanvraagBlockComponent,
  decorators: [applicationConfig({ providers: [provideRouter([])] })],
  // A Concept renders as a CIBG melding (block element), not a keuzelijst <li> — no <ul>
  // wrapper. Production agrees: mijn-aanvragen.section.ts renders this block for concepten
  // only, outside any list.
  render: (args) => ({ props: args, template: `<app-aanvraag-block [aanvraag]="aanvraag" />` }),
};
export default meta;
type Story = StoryObj<AanvraagBlockComponent>;

// The whole template sits inside `@if (aanvraag().status.tag === 'Concept')`, so this is
// the only status that renders anything. Submitted/resolved aanvragen render through
// application-link, which has its own stories.
export const Concept: Story = {
  args: { aanvraag: { ...base, status: { tag: 'Concept', stepIndex: 1, stepCount: 3 } } },
};