import {
  Component,
  Input,
  ContentChild,
  TemplateRef,
  ContentChildren,
  QueryList,
  Injector,
  ViewChild,
} from '@angular/core';
import { TabStripComponent } from '@progress/kendo-angular-layout';
import {
  TabItemModel,
  TabControlModel,
  ComponentId,
  AngularComponentId,
} from '@mobilize/wms-framework';

@Component({
  selector: 'wm-tabitem',
  template: `<div></div>`,
})
export class TabItem {
  @Input()
  model: TabItemModel;

  @Input()
  title = '';

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

  ngOnInit(): void {
    this.model = this.model ?? new TabItemModel();
    this.model.header = this.title !== '' ? this.title : this.model.header;
    this.model.templateRef = this.itemContentTemplate;
  }
}

@Component({
  selector: 'wm-tabcontrol',
  templateUrl: './tabcontrol.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
@ComponentId([AngularComponentId.tabControl])
export class TabControl {
  isInitialized = false;

  @Input()
  model: TabControlModel;
  @ContentChildren(TabItem) viewChildren: QueryList<TabItem>;
  @ViewChild(TabStripComponent) tabComponent: TabStripComponent;

  items: any[] = [];
  private collectionChangeHandlerToRemove: () => void;
  private modelChangeHandlerToRemove: (p1: string) => void;

  constructor(private injector: Injector) {}

  ngOnInit(): void {
    this.model = this.model ?? new TabControlModel();

    this.collectionChangeHandlerToRemove =
      this.model.items.collectionChangeEvent.addHandler(() =>
        this.synchWithModel()
      );
    this.modelChangeHandlerToRemove = this.model.change.addHandler(
      (property) => {
        if (property === 'SelectedIndex') {
          this.changeSelectedTab(this.model.selectedIndex);
        }
      }
    );
    this.synchWithModel();
  }

  ngAfterViewInit(): void {
    if (!this.isInitialized) {
      const tmpItems = [];
      this.viewChildren.forEach((item) => {
        tmpItems.push(item.model);
      });
      this.isInitialized = true;
      // the following timeout avoid runtime error
      setTimeout(() => {
        this.model.syncWithDesignItems(tmpItems);
      });
    }
  }

  ngOnDestroy(): void {
    this.model.items.collectionChangeEvent.removeHandler(
      this.collectionChangeHandlerToRemove
    );
    this.model.change.removeHandler(this.modelChangeHandlerToRemove);
  }

  onTabSelected($event): void {
    if (typeof $event.index === 'number') {
      this.model.selectedTabIndex = $event.index;
    }
  }

  changeSelectedTab(index: number): void {
    this.tabComponent?.selectTab(index);
  }

  private synchWithModel(): void {
    this.items = this.model.items.internalArray;
  }
}