import { Component, Input, Output, EventEmitter, ElementRef, forwardRef, ExistingProvider, OnInit, OnChanges } from '@angular/core';
import { InputBase } from './inputBase';
// import 'devextreme/integration/jquery';
// import * as jQuery from 'jquery';

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

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

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

  @Input("rd-warning-text") warningText;
  @Input("rd-default") default;
  @Input("rd-disabled") disabled;
  @Input("rd-required") required;
  @Input("rd-readOnly") readOnly: boolean;

  @Input("rd-text") text;

  ngOnInit() {
    this.checkDefault();
    this.container = this.jQuery(this.element.nativeElement).find("#dxElement");
    this.container.dxCheckBox({
      onValueChanged: (e) => this.onChange(e.value),
      value: this.model && this.model != 'false' || this.default && this.default != "false" || false,
      disabled: this.disabled,
      readOnly: this.readOnly,
      text: this.text
    });

    this.dxElement = this.container.dxCheckBox('instance');

    var val = this.dxElement.option('value');
    if (val != this.model) {
      this.onChange(this.dxElement.option('value'));
    }

    // Checkbox Required validation should be changed with custom validation. Because when value is false validation is invalid
    if (this.required) {
      this.required = false;
      this.customValidationRules = [{
        type: "custom",
        validationCallback: function (e) {
          return e.value != undefined;
        }
      }]
    }
    //this.updateValidator();
  }

  ngOnChanges(changes) {
    if (!this.dxElement) return;
    if (changes.required) this.updateValidator();
    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);
  }
}