import type { Meta, StoryObj } from '@storybook/angular';
import { moduleMetadata } from '@storybook/angular';
import { AddressFieldsComponent } from './address-fields.component';

const meta: Meta<AddressFieldsComponent> = {
  title: 'Organisms/Address Fields',
  component: AddressFieldsComponent,
  decorators: [moduleMetadata({ imports: [AddressFieldsComponent] })],
  render: (args) => ({
    props: { ...args, onChange: (e: unknown) => console.log('fieldChange', e) },
    template: `
      <app-address-fields [value]="value" [errors]="errors" (fieldChange)="onChange($event)" />`,
  }),
};
export default meta;
type Story = StoryObj<AddressFieldsComponent>;

const empty = { straat: '', postcode: '', woonplaats: '' };

export const Default: Story = { args: { value: empty, errors: {} } };

export const Prefilled: Story = {
  args: { value: { straat: 'Stationsplein 1', postcode: '3511 ED', woonplaats: 'Utrecht' }, errors: {} },
};

export const WithErrors: Story = {
  args: {
    value: { straat: '', postcode: '12', woonplaats: '' },
    errors: { straat: 'Vul een straat en huisnummer in.', postcode: 'Voer een geldige postcode in, bijv. 1234 AB.' },
  },
};
