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

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

export interface <%= classify(name) %>Value {
  paymentDate: string;
  frequency: string;
  endDate: string;
}

const FREQUENCIES: readonly <%= classify(name) %>FrequencyOption[] = [
  { value: 'once', label: 'Uma vez' },
  { value: 'monthly', label: 'Mensal' },
  { value: 'weekly', label: 'Semanal' },
];

const INITIAL_VALUE: <%= classify(name) %>Value = {
  paymentDate: '',
  frequency: 'once',
  endDate: '',
};

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 schedule = signal<<%= classify(name) %>Value>({ ...INITIAL_VALUE });
  protected readonly statusMessage = signal('');

  readonly title = input('Agendar pagamento');
  readonly dateLabel = input('Data do pagamento');
  readonly frequencyLabel = input('Frequência');
  readonly endDateLabel = input('Data final');
  readonly submitLabel = input('Salvar agendamento');
  readonly cancelLabel = input('Cancelar agendamento');
  readonly dateMessage = input('Escolha uma data de pagamento.');
  readonly successMessage = input('O agendamento de pagamento está pronto para revisão.');
  readonly frequencyOptions = input<readonly <%= classify(name) %>FrequencyOption[]>(FREQUENCIES);
  readonly scheduleSubmit = output<<%= classify(name) %>Value>();
  readonly scheduleCancel = output<void>();

  protected readonly titleId = computed(() => `${this.instanceId}-title`);
  protected readonly paymentDateId = computed(() => `${this.instanceId}-payment-date`);
  protected readonly frequencyId = computed(() => `${this.instanceId}-frequency`);
  protected readonly endDateId = computed(() => `${this.instanceId}-end-date`);
  protected readonly dateErrorId = computed(() => `${this.instanceId}-payment-date-error`);

  protected readonly dateError = computed(() => {
    if (!this.submitted() || this.schedule().paymentDate) {
      return '';
    }

    return this.dateMessage();
  });

  protected readonly dateDescribedBy = computed(() => this.dateError() ? this.dateErrorId() : null);
  protected readonly recurrenceSummary = computed(() => {
    const value = this.schedule();
    const frequency = this.frequencyOptions().find((option) => option.value === value.frequency)?.label ?? value.frequency;

    if (!value.paymentDate) {
      return '';
    }

    return `Agendado para ${value.paymentDate}. Frequência: ${frequency}.${value.endDate ? ` Termina em ${value.endDate}.` : ''}`;
  });

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

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

    if (this.dateError()) {
      this.statusMessage.set('Verifique a data do agendamento e tente novamente.');
      return;
    }

    this.statusMessage.set(this.successMessage());
    this.scheduleSubmit.emit(this.schedule());
  }

  protected cancel(): void {
    this.submitted.set(false);
    this.statusMessage.set('Agendamento cancelado.');
    this.scheduleCancel.emit();
  }
}