import type { Meta, StoryObj } from '@storybook/angular';
import { applicationConfig } from '@storybook/angular';
import { provideHttpClient } from '@angular/common/http';
import { provideApiClient } from '@shared/infrastructure/api-client.provider';
import { HerregistratieWizardComponent } from './herregistratie-wizard.component';
import { WizardState } from '@herregistratie/domain/herregistratie.machine';
import { initialUpload } from '@shared/upload/upload.machine';
import { Uren } from '@registratie/domain/value-objects/uren';

const validData = { uren: 4160 as Uren, jaren: 5, punten: 200, documents: [] };

const meta: Meta<HerregistratieWizardComponent> = {
  title: 'Herregistratie/Wizard',
  component: HerregistratieWizardComponent,
  // The wizard injects BigProfileStore (for the optimistic cross-page flag),
  // which creates httpResources — so the story needs an HttpClient.
  decorators: [applicationConfig({ providers: [provideHttpClient(), provideApiClient()] })],
};
export default meta;
type Story = StoryObj<HerregistratieWizardComponent>;

// Each story seeds one state of the machine — one render per union variant.
export const Step1: Story = {
  args: {
    seed: {
      tag: 'Editing',
      step: 1,
      draft: { uren: '', jaren: '', punten: '' },
      errors: {},
      upload: initialUpload,
    },
  },
};
export const Step1Error: Story = {
  args: {
    seed: {
      tag: 'Editing',
      step: 1,
      draft: { uren: 'abc', jaren: '', punten: '' },
      errors: {
        uren: 'Vul een geheel aantal in (0 of meer).',
        jaren: 'Vul een geheel aantal in (0 of meer).',
      },
      upload: initialUpload,
    } satisfies WizardState,
  },
};
export const Step2: Story = {
  args: {
    seed: {
      tag: 'Editing',
      step: 2,
      draft: { uren: '4160', jaren: '5', punten: '' },
      errors: {},
      upload: initialUpload,
    },
  },
};
export const Step3: Story = {
  args: {
    seed: {
      tag: 'Editing',
      step: 3,
      draft: { uren: '4160', jaren: '5', punten: '200' },
      errors: {},
      upload: initialUpload,
    },
  },
};
export const Submitting: Story = { args: { seed: { tag: 'Submitting', data: validData } } };
export const Submitted: Story = { args: { seed: { tag: 'Submitted', data: validData } } };
export const Failed: Story = {
  args: { seed: { tag: 'Failed', data: validData, error: 'Netwerkfout' } },
};