import type { Meta, StoryObj } from '@storybook/angular';
import { WizardShellComponent } from './wizard-shell.component';

const meta: Meta<WizardShellComponent> = {
  title: 'Templates/WizardShell',
  component: WizardShellComponent,
  render: (args) => ({
    props: args,
    template: `
      <app-wizard-shell
        [steps]="steps" [current]="current" [stepTitle]="stepTitle" [processName]="processName" [status]="status"
        [primaryLabel]="primaryLabel" [canGoBack]="canGoBack" [errors]="errors" [errorMessage]="errorMessage"
        (goToStep)="goToStep($event)">
        <p class="rhc-paragraph">Voorbeeld-stapinhoud (de stapvelden worden hier geprojecteerd).</p>
        <div wizardSuccess><p class="rhc-paragraph">Uw aanvraag is ontvangen.</p></div>
      </app-wizard-shell>`,
  }),
  parameters: {
    cibgGap: true,
    docs: {
      description: {
        component:
          'CIBG-gap extension (error summary only) — see Foundations/CIBG Gap Register.',
      },
    },
  },
};
export default meta;
type Story = StoryObj<WizardShellComponent>;

const steps = ['Adres', 'Beroep', 'Controle'];
const base = {
  steps,
  current: 1,
  stepTitle: 'Beroep op basis van uw diploma',
  processName: 'Inschrijven in het BIG-register',
  primaryLabel: 'Volgende',
  canGoBack: true,
  errors: [],
  errorMessage: '',
  goToStep: () => {},
};

export const Editing: Story = { args: { ...base, status: 'editing' } };
export const EditingMetFouten: Story = {
  args: {
    ...base,
    status: 'editing',
    errors: [
      { id: 'uren', message: 'Vul het aantal gewerkte uren in.' },
      { id: 'diploma', message: 'Kies een diploma.' },
    ],
  },
};
export const Submitting: Story = { args: { ...base, status: 'submitting' } };
export const Submitted: Story = { args: { ...base, status: 'submitted' } };
export const Failed: Story = {
  args: { ...base, status: 'failed', errorMessage: 'Het indienen is niet gelukt: netwerkfout.' },
};