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

interface <%= classify(name) %>State {
  name: string;
  email: string;
  message: string;
}

let nextId = 0;

@Component({
  selector: '<%= selector %>',
  imports: [],
  templateUrl: './<%= dasherize(name) %>.html',
  styleUrl: './<%= dasherize(name) %>.css',
})
export class <%= classify(name) %> {
  private readonly emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

  protected readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;
  protected readonly submitted = signal(false);
  protected readonly statusMessage = signal('');
  protected readonly form = signal<<%= classify(name) %>State>({
    name: '',
    email: '',
    message: '',
  });

  readonly title = input('Contact form');
  readonly nameLabel = input('Name');
  readonly emailLabel = input('Email');
  readonly messageLabel = input('Message');
  readonly messageHint = input('Minimum 10 characters.');
  readonly submitLabel = input('Submit');
  readonly nameRequiredMessage = input('Enter your name.');
  readonly emailRequiredMessage = input('Enter your email address.');
  readonly emailInvalidMessage = input('Enter a valid email address.');
  readonly messageRequiredMessage = input('Enter a message with at least 10 characters.');
  readonly invalidStatusMessage = input('Check the highlighted fields and try again.');
  readonly validStatusMessage = input('Form is valid and ready to submit.');

  protected readonly nameError = computed(() => {
    if (!this.submitted() || this.form().name.trim()) {
      return '';
    }

    return this.nameRequiredMessage();
  });

  protected readonly emailError = computed(() => {
    if (!this.submitted()) {
      return '';
    }

    const email = this.form().email.trim();
    if (!email) {
      return this.emailRequiredMessage();
    }

    return this.emailPattern.test(email) ? '' : this.emailInvalidMessage();
  });

  protected readonly messageError = computed(() => {
    if (!this.submitted() || this.form().message.trim().length >= 10) {
      return '';
    }

    return this.messageRequiredMessage();
  });

  protected readonly isInvalid = computed(() => Boolean(this.nameError() || this.emailError() || this.messageError()));

  protected updateField(field: keyof <%= classify(name) %>State, event: Event): void {
    const value = (event.target as HTMLInputElement | HTMLTextAreaElement).value;
    this.form.update((current) => ({ ...current, [field]: value }));
  }

  protected submit(event: SubmitEvent): void {
    event.preventDefault();
    this.submitted.set(true);

    if (this.isInvalid()) {
      this.statusMessage.set(this.invalidStatusMessage());
      return;
    }

    this.statusMessage.set(this.validStatusMessage());
  }
}