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

export interface <%= classify(name) %>Control {
  id: string;
  label: string;
  description: string;
  enabled: boolean;
  disabled?: boolean;
}

export interface <%= classify(name) %>Change {
  id: string;
  enabled: boolean;
}

const DEFAULT_CONTROLS: readonly <%= classify(name) %>Control[] = [
  { id: 'online', label: 'Compras online', description: 'Permitir compras em aplicativos e sites.', enabled: true },
  { id: 'international', label: 'Uso internacional', description: 'Permitir transações fora do país do cartão.', enabled: false },
  { id: 'contactless', label: 'Pagamentos por aproximação', description: 'Permitir transações por aproximação.', enabled: true },
  { id: 'withdrawal', label: 'Saques em caixas eletrônicos', description: 'Permitir saques em dinheiro com este cartão.', enabled: false },
];

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 controlStates = signal<Record<string, boolean>>(
    Object.fromEntries(DEFAULT_CONTROLS.map((control) => [control.id, control.enabled])),
  );
  protected readonly statusMessage = signal('');

  readonly title = input('Controles do cartão');
  readonly cardLabel = input('Cartão de débito corporativo');
  readonly maskedNumber = input('•••• 4921');
  readonly cardStatus = input('Ativo');
  readonly controls = input<readonly <%= classify(name) %>Control[]>(DEFAULT_CONTROLS);
  readonly controlChange = output<<%= classify(name) %>Change>();

  protected readonly titleId = computed(() => `${this.instanceId}-title`);
  protected readonly cardDescriptionId = computed(() => `${this.instanceId}-card-description`);

  protected controlId(control: <%= classify(name) %>Control): string {
    return `${this.instanceId}-${control.id}`;
  }

  protected controlDescriptionId(control: <%= classify(name) %>Control): string {
    return `${this.controlId(control)}-description`;
  }

  protected isEnabled(control: <%= classify(name) %>Control): boolean {
    return this.controlStates()[control.id] ?? control.enabled;
  }

  protected toggleControl(control: <%= classify(name) %>Control, event: Event): void {
    const enabled = (event.target as HTMLInputElement).checked;
    this.controlStates.update((current) => ({ ...current, [control.id]: enabled }));
    this.statusMessage.set(`${control.label} ${enabled ? 'ativado' : 'desativado'}.`);
    this.controlChange.emit({ id: control.id, enabled });
  }
}