import { Component, computed, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HeadingComponent } from '@shared/ui/atoms/heading/heading.component';
import { TextInputComponent } from '@shared/ui/atoms/text-input/text-input.component';
import { parsePostcode } from '@registratie/domain/value-objects/postcode';
import { ConceptCardComponent } from './concept-card.component';
import { SNIPPETS } from './snippets.generated';
import { highlightTs } from './highlight-ts';

/** Section 3: parse, don't validate. After parsing, the TYPE remembers the value is valid.
    Composition-only; owns its own postcode demo. */
@Component({
  selector: 'app-concepts-parse-section',
  imports: [FormsModule, HeadingComponent, TextInputComponent, ConceptCardComponent],
  template: `
    <section class="app-section">
      <app-heading [level]="2">3 · Parse, don't validate</app-heading>
      <p class="app-lead">Na het parsen onthoudt het <em>type</em> dat de waarde geldig is.</p>
      <div class="app-cols">
        <app-concept-card
          tag="Smart constructor → Result"
          [code]="code['parse']"
          [src]="src['parse']"
        >
          <app-text-input
            inputId="pc"
            [ngModel]="raw()"
            (ngModelChange)="raw.set($event)"
            name="pc"
            placeholder="Typ een postcode, bijv. 1234 AB"
          />
        </app-concept-card>
        @let r = parsed();
        <app-concept-card [variant]="r.ok ? 'good' : 'bad'" [tag]="r.ok ? 'ok' : 'err'">
          @if (r.ok) {
            <div animate.enter="app-item-enter">
              <pre class="app-code">Postcode ="{{ r.value }}"</pre>
              <p class="app-note">
                Een gevalideerde <code>Postcode</code> is een ander type dan een ruwe string.
              </p>
            </div>
          } @else {
            <div animate.enter="app-item-enter">
              <pre class="app-code">{{ r.error }}</pre>
            </div>
          }
        </app-concept-card>
      </div>
    </section>
  `,
})
export class ParseSection {
  raw = signal('');
  parsed = computed(() => parsePostcode(this.raw()));

  protected readonly code: Record<string, string> = { parse: highlightTs(SNIPPETS['parse']) };
  protected readonly src: Record<string, string> = {
    parse: 'registratie/domain/value-objects/postcode.ts',
  };
}