import type { Meta, StoryObj } from '@storybook/angular';
import { applicationConfig } from '@storybook/angular';
import { provideHttpClient } from '@angular/common/http';
import { ChangeRequestFormComponent } from './change-request-form.component';
import { provideApiClient } from '@shared/infrastructure/api-client.provider';
import { Postcode } from '@registratie/domain/value-objects/postcode';

const validData = { straat: 'Lange Voorhout 9', postcode: '2514 EA' as Postcode, woonplaats: 'Den Haag' };

const meta: Meta<ChangeRequestFormComponent> = {
  title: 'Organisms/Change Request Form',
  component: ChangeRequestFormComponent,
  // The form injects ApiClient (over HttpClient) for the submit command.
  decorators: [applicationConfig({ providers: [provideHttpClient(), provideApiClient()] })],
};
export default meta;
type Story = StoryObj<ChangeRequestFormComponent>;

// One render per state of the machine.
export const Empty: Story = { args: { seed: { tag: 'Editing', draft: { straat: '', postcode: '', woonplaats: '' }, errors: {} } } };
export const WithErrors: Story = {
  args: {
    seed: {
      tag: 'Editing',
      draft: { straat: '', postcode: 'nope', woonplaats: '' },
      errors: { straat: 'Vul straat en huisnummer in.', postcode: 'Voer een geldige postcode in, bijv. 1234 AB.' },
    },
  },
};
export const Submitting: Story = { args: { seed: { tag: 'Submitting', data: validData } } };
export const Submitted: Story = { args: { seed: { tag: 'Submitted', data: validData, referentie: 'BIG-2026-123456' } } };
export const Failed: Story = { args: { seed: { tag: 'Failed', data: validData, error: 'Netwerkfout' } } };