import { Component, OnDestroy, ViewEncapsulation, forwardRef, Input, Output, EventEmitter } from '@angular/core';
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';

const RADIOBUTTON_CONTROL_VALUE_ACCESSOR: any = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => RadioButtonComponent),
  multi: true
};

@Component({
  selector: 'app-radio-button',
  templateUrl: 'radio-button.component.html',
  encapsulation: ViewEncapsulation.None,
  providers: [RADIOBUTTON_CONTROL_VALUE_ACCESSOR]
})
export class RadioButtonComponent implements ControlValueAccessor {

  @Input() public id: string;
  @Input() public name: string;
  @Input() public classStyle: string = '';
  @Input() public required: boolean = false;
  @Input() public disabled: boolean = false;
  @Input() public key: string = 'value';

  private _items: any[] = [];
  @Input()
  get items() { return this._items; }
  set items(items: any[]) { this._items = items; this.setOptionList(); }

  @Output() public onValueChange: EventEmitter<any>;

  public optionList: any[] = [];
  /** value emited to outside */
  public value: any;
  /** value binded into component */
  public selectedValue: any;
  public firstIndex: number = 0;

  private noKeyDefinedMessage = 'no-key-defined';

  public propagateChange = (_: any) => { /* do nothing */ };
  public propagateTouch = (_: any) => { /* do nothing */ };

  constructor() {
    this.onValueChange = new EventEmitter<any>();
  }

  public writeValue(value: any): void {
    console.log('value : ', value);
    if (value === null) {
      this.value = null;
      this.selectedValue = null;
    } else {
      const itemIndex = this.optionList.findIndex(item => {
        if (this.getItemByKey(item) !== this.noKeyDefinedMessage) {
          return this.getItemByKey(item) === value;
        } else {
          return false;
        }
      });

      if (itemIndex !== -1) {
        this.value = value;
        this.selectedValue = this.optionList[itemIndex];
      } else {
        console.error('no item with provided key');
      }
    }
  }

  public registerOnChange(fn: (_: any) => {}): void {
    this.propagateChange = fn;
  }

  public registerOnTouched(fn: (_: any) => {}): void {
    this.propagateTouch = fn;
  }

  public setDisabledState(isDisabled: boolean): void {
    this.disabled = isDisabled;
  }

  private setOptionList(): void {
    this.optionList = Object.assign([], this._items);
  }

  public _onValueChange(event: any): void {
    console.log('getItemByKey : ', this.getItemByKey(this.selectedValue));
    if (this.getItemByKey(this.selectedValue) !== this.noKeyDefinedMessage) {
      if (this.getItemByKey(this.selectedValue) !== this.getItemByKey(event)) {
        this.selectedValue = event;
        this.value = this.getItemByKey(event);
        this.propagateChange(this.value);
        this.onValueChange.emit(this.value);
      }
    } else {
      console.error('no item with provided key');
    }
  }

  public change(event: any) {
    console.log('event : ', event);
    console.log(this.selectedValue);
  }

  public getItemByKey(item: any): string {
    if (item) {
      if (this.key) {
        return item[this.key];
      } else {
        let localKey = null;
        for (const objKey in item) {
          if (objKey !== 'id' && objKey !== 'version' && objKey !== 'rootId' && objKey !== 'rootVersion') {
            localKey = objKey;
            break;
          }
        }

        if (localKey) {
          return item[localKey];
        }
        return this.noKeyDefinedMessage;
      }
    } else {
      return this.noKeyDefinedMessage;
    }
  }
}