import { Component, booleanAttribute, input } from '@angular/core';

/** Molecule: form field = label + projected control + optional error/description.
    Reused by both the login form and the change-request form. */
@Component({
  selector: 'app-form-field',
  styles: [`
    :host{display:block}
    .label{display:block;font-weight:var(--rhc-text-font-weight-semi-bold);margin-block-end:var(--rhc-space-max-sm)}
    .req{font-weight:var(--rhc-text-font-weight-regular);color:var(--rhc-color-foreground-subtle)}
    .desc{color:var(--rhc-color-foreground-subtle);font-size:var(--rhc-text-font-size-sm);margin-block-end:var(--rhc-space-max-sm)}
    .error{color:var(--rhc-color-foreground-default);font-weight:var(--rhc-text-font-weight-semi-bold);margin-block-start:var(--rhc-space-max-sm);border-inline-start:var(--rhc-border-width-md) solid var(--rhc-color-rood-500);padding-inline-start:var(--rhc-space-max-md)}
  `],
  template: `
    <div class="form-field">
      <label class="form-label label" [id]="fieldId() + '-label'" [for]="fieldId()">
        {{ label() }}@if (required()) { <span class="req" i18n="@@formField.verplicht">(verplicht)</span> }
      </label>
      @if (description()) {
        <div class="form-text desc" [id]="fieldId() + '-desc'">{{ description() }}</div>
      }
      <ng-content />
      @if (error()) {
        <div class="error" [id]="fieldId() + '-error'" role="alert">{{ error() }}</div>
      }
    </div>
  `,
})
export class FormFieldComponent {
  label = input.required<string>();
  fieldId = input.required<string>();
  description = input<string>();
  error = input<string>();
  required = input(false, { transform: booleanAttribute });
}