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

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

@Component({
  selector: "rd-input-switch",
  template: `
    <div id="dxElement" style="height:23px;width:55px"></div>
  `,
  providers: [provider]
})
export class InputSwitch extends InputBase implements OnInit, OnChanges {
  constructor(private element: ElementRef) { super(); }

  @Input("rd-model") model: boolean;
  @Output("rd-modelChange") modelChange: EventEmitter<boolean> = new EventEmitter<boolean>();
  @Output("rd-change") changeEvent: EventEmitter<boolean> = new EventEmitter<boolean>();

  @Input("rd-disabled") disabled: boolean;
  @Input("rd-readOnly") readOnly: boolean;
  @Input("rd-onText") onText: string = RdLib.localization.translateEn("On");
  @Input("rd-offText") offText: string = RdLib.localization.translateEn("Off");

  ngOnInit() {
    this.container = this.jQuery(this.element.nativeElement).find("#dxElement");
    this.container.dxSwitch({
      onValueChanged: (e) => this.onChange(e.value),
      value: this.model == true ? true : false,
      disabled: this.disabled,
      onText: this.onText,
      offText: this.offText,
      readOnly: this.readOnly
    });
    this.dxElement = this.container.dxSwitch('instance');
    this.onChange(this.dxElement.option('value'));
  }

  ngOnChanges(changes) {
    if (!this.dxElement) return;
    if (changes.model) this.dxElement.option('value', this.model);
    if (changes.disabled) this.dxElement.option('disabled', this.disabled);
    if (changes.readOnly) this.dxElement.option('readOnly', this.readOnly);
  }
}