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

export type <%= classify(name) %>Method = 'key' | 'copyPaste' | 'qrCode';

export interface <%= classify(name) %>MethodOption {
  value: <%= classify(name) %>Method;
  label: string;
}

export interface <%= classify(name) %>Value {
  method: <%= classify(name) %>Method;
  pixKey: string;
  amount: string;
  description: string;
}

const METHOD_OPTIONS: readonly <%= classify(name) %>MethodOption[] = [
  { value: 'key', label: 'Chave Pix' },
  { value: 'copyPaste', label: 'Pix copia e cola' },
  { value: 'qrCode', label: 'QR Code' },
];

const INITIAL_VALUE: <%= classify(name) %>Value = {
  method: 'key',
  pixKey: '',
  amount: '',
  description: '',
};

let nextId = 0;

@Component({
  selector: '<%= selector %>',
  imports: [],
  templateUrl: './<%= dasherize(name) %>.html',
  styleUrl: './<%= dasherize(name) %>.css',
})
export class <%= classify(name) %> {
  protected readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;
  protected readonly submitted = signal(false);
  protected readonly payment = signal<<%= classify(name) %>Value>({ ...INITIAL_VALUE });
  protected readonly statusMessage = signal('');

  readonly title = input('Pagamento via Pix');
  readonly methodLabel = input('Forma de pagamento via Pix');
  readonly pixKeyLabel = input('Chave Pix ou código copia e cola');
  readonly amountLabel = input('Valor');
  readonly descriptionLabel = input('Descrição');
  readonly submitLabel = input('Revisar pagamento Pix');
  readonly requiredMessage = input('Este campo é obrigatório.');
  readonly amountMessage = input('Informe um valor maior que zero.');
  readonly successMessage = input('O pagamento via Pix está pronto para revisão.');
  readonly methodOptions = input<readonly <%= classify(name) %>MethodOption[]>(METHOD_OPTIONS);
  readonly pixSubmit = output<<%= classify(name) %>Value>();

  protected readonly titleId = computed(() => `${this.instanceId}-title`);
  protected readonly methodGroupId = computed(() => `${this.instanceId}-method-group`);
  protected readonly pixKeyId = computed(() => `${this.instanceId}-pix-key`);
  protected readonly amountId = computed(() => `${this.instanceId}-amount`);
  protected readonly descriptionId = computed(() => `${this.instanceId}-description`);

  protected methodId(method: <%= classify(name) %>Method): string {
    return `${this.instanceId}-method-${method}`;
  }

  protected errorId(field: keyof <%= classify(name) %>Value): string {
    return `${this.instanceId}-${field}-error`;
  }

  protected fieldError(field: keyof <%= classify(name) %>Value): string {
    if (!this.submitted()) {
      return '';
    }

    const value = this.payment()[field].trim();
    if (field === 'amount') {
      return Number(value) > 0 ? '' : this.amountMessage();
    }

    if (field === 'pixKey') {
      return value ? '' : this.requiredMessage();
    }

    return '';
  }

  protected describedBy(field: keyof <%= classify(name) %>Value): string | null {
    return this.fieldError(field) ? this.errorId(field) : null;
  }

  protected updateMethod(method: <%= classify(name) %>Method): void {
    this.payment.update((current) => ({ ...current, method }));
  }

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

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

    const hasError = this.fieldError('pixKey') || this.fieldError('amount');
    if (hasError) {
      this.statusMessage.set('Verifique os campos do pagamento Pix e tente novamente.');
      return;
    }

    this.statusMessage.set(this.successMessage());
    this.pixSubmit.emit(this.payment());
  }
}