import { Component, Input, Output, EventEmitter, forwardRef, Optional, ElementRef, HostBinding, ChangeDetectorRef, OnInit } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { RadioGroupComponent } from './radio-group.component';

@Component({
  selector: 'farris-radio',
  templateUrl: './radio.component.html',
  styleUrls: ['./radio.component.css'],
  providers: [{
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => RadioComponent),
    multi: true,
  }]
  // changeDetection: ChangeDetectionStrategy.OnPush,
})
export class RadioComponent implements ControlValueAccessor, OnInit {

  /* radio 原生name 用于多个radio单选使用 */
  // get name() {
  //   if (this.hasParent(this.el.nativeElement)) {
  //     return this.radioGroup.name;
  //   }
  // }
 
  /* radio 值 */
  @Input()
  get model(): any {
    if (this.hasParent(this.el.nativeElement)) {
      return this.radioGroup.model;
    }
    return this.nyModel;
  }

  set model(model: any) {
    this.nyModel = model;
  }


  @Input() id: string;

  /* radio 值 */
  @Input() label: any = '';

  /* 禁用 */
  @Input() disabled: boolean;

  nyModel: any;

  name = '';

  @Output() modelChange = new EventEmitter<any>();

  @HostBinding('class.d-block') blockClass = true;

  constructor(
    @Optional() private radioGroup: RadioGroupComponent,
    private el: ElementRef
  ) {
  }

  ngOnInit() {
    this.name = this.radioGroup.name;
  }

  changeModelHandler() {
    // 父元素获取label  子元素再从父元素获取model
    if (this.hasParent(this.el.nativeElement)) {
      return this.radioGroup.changeModel(this.label);
    }
    this.model = this.label;
    this.modelChange.emit(this.model);
    this.controlChange(this.label);
  }

  /* 是否存在父元素  存在即单选组*/
  hasParent(element: any) {
    return element.parentElement.classList.contains('farris-radio-group');
  }

  writeValue(value: any): void {
    this.model = value;
  }

  registerOnChange(fn: Function): void {
    this.controlChange = fn;
  }

  registerOnTouched(fn: Function): void {
    this.controlTouch = fn;
  }

  private controlChange: Function = () => { };
  private controlTouch: Function = () => { };

}