import type { Meta, StoryObj } from '@storybook/angular';
import { moduleMetadata } from '@storybook/angular';
import { FormFieldComponent } from './form-field.component';
import { TextInputComponent } from '@shared/ui/text-input/text-input.component';

const meta: Meta<FormFieldComponent> = {
  title: 'Molecules/Form Field',
  component: FormFieldComponent,
  decorators: [moduleMetadata({ imports: [TextInputComponent] })],
  render: (args) => ({
    props: args,
    // form-horizontal + .row context, same as every real caller (wizard-shell, login-form, …).
    template: `
      <form class="form-horizontal">
        <app-form-field [label]="label" [fieldId]="fieldId" [description]="description" [error]="error" [required]="required">
          <app-text-input [inputId]="fieldId" [invalid]="!!error" placeholder="Vul in" />
        </app-form-field>
      </form>`,
  }),
};
export default meta;
type Story = StoryObj<FormFieldComponent>;

export const Default: Story = {
  args: { label: 'BSN', fieldId: 'bsn', description: '9 cijfers', required: true },
};
export const WithError: Story = {
  args: { label: 'Straat en huisnummer', fieldId: 'street', error: 'Dit veld is verplicht.', required: true },
};
