import {
  Component,
  ChangeDetectionStrategy,
  TemplateRef,
  ContentChild,
  Input,
  Output,
  EventEmitter,
  Optional,
} from '@angular/core';
import {
  HorizontalAlignment,
  VerticalAlignment,
  Visibility,
} from '@mobilize/wms-framework';
import { ComboBoxModel } from '@mobilize/wms-framework';
import { ThicknessModel } from '@mobilize/wms-framework';
import { ModelProxy } from '@mobilize/wms-framework';
import { ComponentId } from '@mobilize/wms-framework';
import { AngularComponentId } from '@mobilize/wms-framework';

@Component({
  selector: 'wm-simple-combobox',
  templateUrl: './combobox.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
@ComponentId([AngularComponentId.comboBox])
export class SimpleComboBox {
  internalData: Array<any>;
  private modelProxy: ComboBoxModel = ModelProxy.create<ComboBoxModel>();

  @ContentChild('itemsTemplate', { static: true })
  itemsTemplate: TemplateRef<any>;

  @ContentChild('listValueTemplate', { static: true })
  listValueTemplate: TemplateRef<any>;

  @Input()
  model: ComboBoxModel;

  @Input()
  selectedValue: any;

  @Input()
  textField: string;

  @Input()
  valueField: string;

  @Input()
  get data(): any {
    return this.internalData;
  }

  set data(value: any) {
    /* tslint:disable-next-line:no-string-literal */
    if (typeof value['internalArray'] !== 'undefined') {
      /* tslint:disable-next-line:no-string-literal */
      this.internalData = value['internalArray'];
    } else {
      this.internalData = value;
    }
  }

  @Input()
  get maxDropDownHeight(): any {
    return this.modelProxy.MaxDropDownHeight;
  }

  set maxDropDownHeight(value: any) {
    this.modelProxy.MaxDropDownHeight = parseFloat(value);
  }

  @Input()
  get horizontalAlignment(): string {
    return this.modelProxy.HorizontalAlignment.toString();
  }

  set horizontalAlignment(value: string) {
    this.modelProxy.HorizontalAlignment = HorizontalAlignment.parse(value);
  }

  @Input()
  get verticalAlignment(): string {
    return this.modelProxy.VerticalAlignment.toString();
  }

  set verticalAlignment(value: string) {
    this.modelProxy.VerticalAlignment = VerticalAlignment.parse(value);
  }

  @Input()
  get width(): any {
    return this.modelProxy.width;
  }

  set width(value: any) {
    this.modelProxy.width = parseFloat(value);
  }

  @Input()
  get height(): any {
    return this.modelProxy.height;
  }

  set height(value: any) {
    this.modelProxy.height = parseFloat(value);
  }

  @Input()
  get minWidth(): any {
    return this.modelProxy.MinWidth;
  }

  set minWidth(value: any) {
    this.modelProxy.MinWidth = parseFloat(value);
  }

  @Input()
  get maxWidth(): any {
    return this.modelProxy.MaxWidth;
  }

  set maxWidth(value: any) {
    this.modelProxy.MaxWidth = parseFloat(value);
  }

  @Input()
  get margin(): string {
    return this.model.Margin.toString();
  }

  set margin(value: string) {
    this.modelProxy.Margin = ThicknessModel.parse(value);
  }

  @Input()
  get padding(): string {
    return this.modelProxy.Padding.toString();
  }

  set padding(value: string) {
    this.modelProxy.Padding = ThicknessModel.parse(value);
  }

  @Input()
  get tabIndex(): any {
    return this.modelProxy.TabIndex;
  }

  set tabIndex(value: any) {
    this.modelProxy.TabIndex = parseInt(value, 10);
  }

  @Output()
  selectedValueChange: EventEmitter<any> = new EventEmitter();

  @Output()
  dropDownOpened: EventEmitter<any> = new EventEmitter();

  @Output()
  dropDownClosed: EventEmitter<any> = new EventEmitter();

  @Output()
  loaded: EventEmitter<any> = new EventEmitter();

  public constructor(
    @Optional() protected injectedModel: ComboBoxModel = null
  ) {
    this.model = injectedModel;
  }

  onChange($event): void {
    // for some reason kendo sends the actual object
    if ($event) {
      if (this.data) {
        this.model.SelectedIndex = this.data.indexOf($event);
      } else {
        for (let i = 0; i < this.model?.items?.internalArray?.length; i++) {
          if (this.model.items?.internalArray[i] === $event) {
            this.model.SelectedIndex = i;
            break;
          }
        }
      }
    }
    this.model.SelectionChanged.fire([]);

    if ($event) {
      const valueToEmit =
        /* tslint:disable-next-line:no-string-literal */
        this.data
          ? typeof this.valueField !== 'undefined'
            ? $event[this.valueField]
            : $event
          : $event['contents'];
      this.selectedValueChange.emit(valueToEmit);
    }
  }

  dropDownOpenedHandler($event: any): void {
    this.model?.OnDropDownOpened($event);
    this.dropDownOpened.emit(this);
  }

  dropDownClosedHandler($event: any): void {
    this.model?.OnDropDownClosed($event);
    this.dropDownClosed.emit(this);
  }

  loadedHandler($event: any): void {
    this.model?.Loaded.fire($event);
    this.loaded.emit(this);
  }

  ngOnInit(): void {
    this.model = this.model || this.injectedModel || new ComboBoxModel();
    ModelProxy.copy(this.modelProxy, this.model);
    this.modelProxy = this.model;

    // kendo-dropdownlist doesn't have a 'loaded' event, so we
    // use this Angular lifecycle hook to trigger the event.
    setTimeout(() => {
      // An asynchronous trigger is used to avoid Angular's
      // 'ExpressionChangedAfterItHasBeenCheckedError'.
      // This is far from ideal, but it works.
      this.loadedHandler(this);
    });
  }
}