import { Component, Input, Output, EventEmitter, ElementRef, forwardRef, ExistingProvider, OnInit, OnChanges } from '@angular/core';
import { InputBase } from './inputBase';

const provider: ExistingProvider = { provide: InputBase, useExisting: forwardRef(() => RadioButton) }

export type RadioTypes = "horizontal" | "vertical";

export interface IRadioItem {
  id: any;
  text: any
}

@Component({
  selector: "rd-radio-button",
  template: `
    <div id="dxElementRadio" [style.height.px]="height"></div>
  `,
  providers: [provider]
})
export class RadioButton extends InputBase implements OnInit, OnChanges {
  constructor(private element: ElementRef) { super(); }

  @Input("rd-model") model: string;
  @Output("rd-modelChange") modelChange: EventEmitter<any> = new EventEmitter<any>();
  @Output("rd-change") changeEvent: EventEmitter<any> = new EventEmitter<any>();
  @Output("rd-itemSelect") itemSelectEvent: EventEmitter<IRadioItem> = new EventEmitter<IRadioItem>();

  @Input("rd-disabled") disabled: boolean = false;
  @Input("rd-type") type: RadioTypes = "horizontal";
  @Input("rd-default-index") defaultIndex: number = 0;
  @Input("rd-readOnly") readOnly: boolean = false;
  @Input("rd-height") height: number | string;

  @Input("rd-items") items: Array<IRadioItem> = [];
  @Input("rd-display") displayExpr: string = "text";
  @Input("rd-value") valueExpr: string = "id";

  container;
  dxElement;

  ngOnInit() {
    let value;
    if ((this.model == null || this.model == undefined) && this.items.length) {
      this.onChanges(this.items[this.defaultIndex][this.valueExpr]);
      value = this.items[this.defaultIndex][this.valueExpr];
    }
    else value = this.model;

    this.container = this.jQuery(this.element.nativeElement).find("#dxElementRadio");
    this.container.dxRadioGroup({
      items: this.items,
      disabled: this.disabled,
      readOnly: this.readOnly,
      displayExpr: this.displayExpr,
      valueExpr: this.valueExpr,
      value: value,
      layout: this.type,
      onValueChanged: function (event) {
        this.onChanges(event.value);
      }.bind(this)
    });
    this.dxElement = this.container.dxRadioGroup('instance');
  }

  ngOnChanges(changes) {
    if (!this.dxElement) return;
    if (changes.model) this.dxElement.option('value', this.model);
    if (changes.defaultIndex) this.dxElement.option('value', this.items[this.defaultIndex]);
    if (changes.items) this.dxElement.option('items', this.items);
    if (changes.disabled) this.dxElement.option('disabled', this.disabled);
    if (changes.type) this.dxElement.option('layout', this.type);
    if (changes.readOnly) this.dxElement.option('readOnly', this.readOnly);
  }

  private onChanges(value) {
    this.modelChange.emit(value);

    let item = this.items.filter((e) => { return e[this.valueExpr] == value })[0];
    this.itemSelectEvent.emit(item);
  }
}