import { CommonModule } from '@angular/common';
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

interface RadioButton {
  id: number;
  label: string;
  value: string;
  name: string; // must be same for all radio buttons
  checked: boolean;
  isActive?: boolean; // this field change in this component
}

@Component({
    selector: 'app-ca-input-radiobuttons',
    templateUrl: './ca-input-radiobuttons.component.html',
    styleUrls: ['./ca-input-radiobuttons.component.scss'],
    imports: [
        // Module
        CommonModule,
        FormsModule,
        ReactiveFormsModule,
    ]
})
export class CaInputRadiobuttonsComponent {
  @Input() buttons: RadioButton[] | null = null;
  @Input() disabled: boolean = false;
  @Input() displayRequiredNote?: boolean = false;

  @Output() changedValue: EventEmitter<RadioButton[]> = new EventEmitter<
    RadioButton[]
  >(undefined);

  public onChange(button: RadioButton): void {
    this.buttons?.filter((item) => (item.checked = false));
    button.checked = true;
    this.changedValue.emit(this.buttons!);
  }

  public identity(index: number, item: any): string {
    return item.value;
  }
}