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" [status]="status"
        [primaryLabel]="primaryLabel" [canGoBack]="canGoBack" [errors]="errors" [errorMessage]="errorMessage">
        <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>`,
  }),
};
export default meta;
type Story = StoryObj<WizardShellComponent>;

const steps = ['Adres', 'Beroep', 'Controle'];
const base = { steps, current: 1, stepTitle: 'Beroep op basis van uw diploma', primaryLabel: 'Volgende', canGoBack: true, errors: [], errorMessage: '' };

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.' } };
