import { ToggleButtonModel, TypeResolver } from '@mobilize/wms-framework';
import {
  Component,
  Input,
  Output,
  EventEmitter,
  Optional,
  Injector,
} from '@angular/core';
import {
  CheckBoxModel,
  AngularComponentId,
  ComponentId,
} from '@mobilize/wms-framework';

/**
 * Angular Component for the checkbox Control
 *
 * @export
 * @class CheckBoxComponent
 */
@Component({
  selector: 'wm-checkbox',
  templateUrl: './checkbox.component.html',
  styleUrls: ['./checkbox.component.css'],
})
@ComponentId([AngularComponentId.checkBox])
export class CheckBoxComponent {
  /**
   * Save a cache for the content of the button.
   *
   * @private
   * @type {{ component: any, customInjector: Injector }}
   * @memberof CheckBoxComponent
   */
  private cachedInnerContent: { component: any; customInjector: Injector } =
    null;

  /**
   * Object with properties and events for the Button.
   *
   * @type {CheckBoxModel}
   * @memberof CheckBoxComponent
   */
  @Input()
  model: CheckBoxModel;

  /**
   * property used to save the state of the checkbox.
   *
   * @type {boolean}
   * @memberof CheckBoxComponent
   */
  @Input()
  itemCheck: boolean;

  /**
   * EventEmitter
   * Event Emitter normally called in the OnChange event.
   * @type {EventEmitter<any>}
   * @memberof CheckBoxComponent
   */
  @Output()
  itemCheckChange: EventEmitter<any> = new EventEmitter();

  /**
   * Event Emitter.
   * Event Emitter normally called in the onChange event.
   * @type {EventEmitter<any>}
   * @memberof CheckBoxComponent
   */
  @Output()
  checked: EventEmitter<any> = new EventEmitter();

  /**
   * Event Emitter.
   * Event Emitter normally called in the onChange event.
   *
   * @type {EventEmitter<any>}
   * @memberof CheckBoxComponent
   */
  @Output()
  unchecked: EventEmitter<any> = new EventEmitter();

  /**
   * Event Handler for when the user interact with the checkbox changing the state.
   * This handler is called when the change event of the DOM element is trigged.
   * @param {*} $event
   * @memberof CheckBoxComponent
   */
  onChange($event): void {
    if ($event.target?.checked === true) {
      this.model.IsChecked = true;
      this.itemCheckChange.emit(true);
      this.checked.emit(this.model);
      this.model.Checked.fire([]);
    } else {
      this.model.IsChecked = false;
      this.itemCheckChange.emit(false);
      this.unchecked.emit(this.model);
    }
  }

  /**
   * Gets the content value from the model.Content.
   * Gets the content of the Content Button property.
   *
   * @readonly
   * @type {{ component: any, customInjector: Injector }}
   * @memberof CheckBoxComponent
   */
  get innerContent(): { component: any; customInjector: Injector } {
    if (this.cachedInnerContent) {
      return this.cachedInnerContent;
    }
    if (this.model?.Content) {
      const customInjector = Injector.create({
        providers: [
          {
            provide: this.model?.Content.constructor,
            useValue: this.model.Content,
            deps: [],
          },
        ],
        parent: this.injector,
      });
      this.cachedInnerContent = {
        component: TypeResolver.getType(this.model?.Content.AngularComponentId),
        customInjector,
      };
      return this.innerContent;
    } else {
      return undefined;
    }
  }

  /**
   * Creates an instance of CheckBoxComponent.
   * @param {CheckBoxModel} [injectedModel=null]
   * @param {Injector} injector
   * @memberof CheckBoxComponent
   */
  public constructor(
    @Optional() protected injectedModel: CheckBoxModel = null,
    private injector: Injector
  ) {
    this.model = injectedModel;
  }

  /**
   * Angular lifecycle hook
   *
   * @memberof CheckBoxComponent
   */
  ngOnInit(): void {
    this.model = this.model ?? new CheckBoxModel();
    this.itemCheck = !!this.model.IsChecked;
  }
}