import { Component, input, output } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { FormFieldComponent } from '@shared/ui/molecules/form-field/form-field.component';
import { TextInputComponent } from '@shared/ui/atoms/text-input/text-input.component';

export interface AdresValue {
  straat: string;
  postcode: string;
  woonplaats: string;
}
export type AdresErrors = Partial<Record<keyof AdresValue, string>>;

/** Organism: the editable address block (straat / postcode / woonplaats), grouped
    in a fieldset/legend. Pure & presentational — values in via `value`, errors in
    via `errors`, every keystroke out via `fieldChange`. No store, no services, no
    internal state; the container owns the Model and decides what a change means
    (registratie-wizard dispatches SetField; change-request-form sets its props).
    Composes the form-field molecule (×3) so labels/error wiring stay consistent. */
@Component({
  selector: 'app-address-fields',
  imports: [FormsModule, FormFieldComponent, TextInputComponent],
  // No scoped `fieldset` reset here: the fieldset must keep CIBG's
  // `.form-horizontal fieldset` grey-box padding/margin. A local `fieldset{padding:0}`
  // would tie on specificity and (injected later) win, flattening the padding.
  styles: [
    `
      legend {
        padding: 0;
        font-weight: var(--rhc-text-font-weight-semi-bold);
        margin-block-end: var(--rhc-space-max-md);
      }
    `,
  ],
  template: `
    <fieldset>
      <legend>{{ legend() }}</legend>
      <app-form-field
        i18n-label="@@address.straat"
        label="Straat en huisnummer"
        [fieldId]="idPrefix() + '-straat'"
        required
        [error]="errors().straat"
      >
        <app-text-input
          [inputId]="idPrefix() + '-straat'"
          [invalid]="!!errors().straat"
          [ngModel]="value().straat"
          (ngModelChange)="fieldChange.emit({ key: 'straat', value: $event })"
          name="straat"
          [ngModelOptions]="{ standalone: true }"
        />
      </app-form-field>
      <app-form-field
        i18n-label="@@address.postcode"
        label="Postcode"
        [fieldId]="idPrefix() + '-postcode'"
        required
        [error]="errors().postcode"
      >
        <app-text-input
          [inputId]="idPrefix() + '-postcode'"
          [invalid]="!!errors().postcode"
          [ngModel]="value().postcode"
          (ngModelChange)="fieldChange.emit({ key: 'postcode', value: $event })"
          name="postcode"
          i18n-placeholder="@@address.postcodePlaceholder"
          placeholder="1234 AB"
          [ngModelOptions]="{ standalone: true }"
        />
      </app-form-field>
      <app-form-field
        i18n-label="@@address.woonplaats"
        label="Woonplaats"
        [fieldId]="idPrefix() + '-woonplaats'"
        required
        [error]="errors().woonplaats"
      >
        <app-text-input
          [inputId]="idPrefix() + '-woonplaats'"
          [invalid]="!!errors().woonplaats"
          [ngModel]="value().woonplaats"
          (ngModelChange)="fieldChange.emit({ key: 'woonplaats', value: $event })"
          name="woonplaats"
          [ngModelOptions]="{ standalone: true }"
        />
      </app-form-field>
    </fieldset>
  `,
})
export class AddressFieldsComponent {
  value = input.required<AdresValue>();
  errors = input<AdresErrors>({});
  /** Prefix for field ids/labels — keeps them unique if two blocks ever co-exist. */
  idPrefix = input('adres');
  legend = input($localize`:@@address.legend:Adres`);
  fieldChange = output<{ key: keyof AdresValue; value: string }>();
}