import { Component, ViewChild } from '@angular/core';
import {
  INotifyPropertyChanged,
  SubscriptionEvent,
} from '@mobilize/wms-framework';
import { RadioNameService } from '../../../services/radiobuttonsnames.service';
import { RadioButtonComponent } from '../radio-button.component';

@Component({
  selector: 'wm-mock-radio-button-groups',
  template: `
    <div wmGenerateRadioGroups name="firstSection">
      <wm-radio-button #radio1 name="rb1" [isChecked]="true"></wm-radio-button>
      <wm-radio-button name="rb2"></wm-radio-button>
      <wm-radio-button name="rb3" groupName="thirdGroup"></wm-radio-button>
    </div>
    <div wmGenerateRadioGroups name="secondSection">
      <wm-radio-button name="rb4"></wm-radio-button>
      <wm-radio-button name="rb5" [isChecked]="true"></wm-radio-button>
      <wm-radio-button name="rb6" groupName="thirdGroup"></wm-radio-button>
    </div>
    <div wmGenerateRadioGroups name="thirdSection">
      <wm-radio-button
        name="r7"
        [isChecked]="{ bindingPath: 'valueA', twoWay: true, ctxt: dataCtx }"
      ></wm-radio-button>
      <wm-radio-button
        name="r8"
        [isChecked]="{ bindingPath: 'valueB', twoWay: true, ctxt: dataCtx }"
      ></wm-radio-button>
    </div>
  `,
  styles: [],
})
export class RadioButtonGroupsMockComponent {
  @ViewChild('radio1', { static: false })
  radio1: RadioButtonComponent;

  dataCtx = new RadioButtonExampleModel();
}

/* eslint-disable @typescript-eslint/naming-convention */

class RadioButtonExampleModel implements INotifyPropertyChanged {
  PropertyChanged = new SubscriptionEvent<any>();

  private valueAField = true;
  public get valueA(): boolean {
    return this.valueAField;
  }
  public set valueA(v: boolean) {
    this.valueAField = v;
    this.PropertyChanged.fire([this, { PropertyName: 'valueA' }]);
  }

  private valueBField = false;
  public get valueB(): boolean {
    return this.valueBField;
  }
  public set valueB(v: boolean) {
    this.valueBField = v;
    this.PropertyChanged.fire([this, { PropertyName: 'valueB' }]);
  }
}