import { CdkDragDrop, CdkDropList } from '@angular/cdk/drag-drop';
import { AfterViewInit, Component, EventEmitter, Input, OnDestroy, Output, QueryList, ViewChildren } from '@angular/core';
import { BaseApplication } from '@core/typings/application.typing';
import { BaseApplicationForLogic, FormComponentValidChange, FormDefinitionComponent, FormioChangesWithCompKey } from '@features/configure-forms/form.typing';
import { FormBuilderActionEvent } from '@features/formio/form-builder/form-builder.typing';
import { FormBuilderService } from '@features/formio/form-builder/services/form-builder/form-builder.service';
import { GcFormInstanceComponent } from '@features/formio/form-renderer/gc-form-instance/gc-form-instance.component';
import { FormLogicService } from '@features/formio/services/form-logic/form-logic.service';
import { LogicState } from '@features/logic-builder/logic-builder.typing';
import { SimpleStringMap, TypeToken } from '@yourcause/common';

@Component({
  template: ''
})
export class BaseLayoutComponent implements AfterViewInit, OnDestroy {
  @Input() formioComponent: FormDefinitionComponent;
  @Input() parentFields: Partial<BaseApplication>;
  @Input() validityState: LogicState<BaseApplicationForLogic, boolean>;
  @Input() showErrorSummary: boolean;
  @Input() inConfigModal: boolean;
  @Input() masked: boolean;
  @Input() translations: SimpleStringMap<string>;
  @Input() disabledOverride: boolean;
  @Input() notAutoSave: boolean;
  @Input() uploadRequestStatusText: string;
  @Input() editable: boolean;
  @Input() isManagerEditingApplicantForm: boolean;
  @Input() isManagerForm: boolean;
  @Input() depth: number; // used to sort the drop containers REQUIRED
  @Output() onValueChange = new EventEmitter<FormioChangesWithCompKey>();
  @Output() onValidChange = new EventEmitter<FormComponentValidChange>();
  @Output() componentDropped = new EventEmitter<CdkDragDrop<FormDefinitionComponent[]>>();
  @Output() componentActionClick = new EventEmitter<FormBuilderActionEvent>();

  @ViewChildren(CdkDropList) dragDrop: QueryList<CdkDropList<FormDefinitionComponent[]>>;
  parent: GcFormInstanceComponent;
  $baseComponent = new TypeToken<FormDefinitionComponent>();

  trackBy = (_: number, comp: FormDefinitionComponent) => comp.key;

  constructor (
    public formBuilderService: FormBuilderService,
    public formLogicService: FormLogicService
  ) { }

   get inFormBuilder () {
    return this.formBuilderService.inFormBuilder;
  }

  ngAfterViewInit (): void {
    if (this.editable) {
      for (const dragDropItem of this.dragDrop.toArray()) {
        this.parent.registerDropList(dragDropItem, this.depth);
      }
    }
  }

  valueChanged (
    changes: FormioChangesWithCompKey,
    component: FormDefinitionComponent
  ) {
    this.formLogicService.setValueForComp(component, changes.value);
    this.onValueChange.emit(changes);
  }

  handleDropEvent (drop: CdkDragDrop<FormDefinitionComponent[]>) {
    this.componentDropped.emit(drop);
  }

  ngOnDestroy () {
    if (this.editable) {
      for (const dragDropItem of this.dragDrop.toArray()) {
        this.parent.deregisterDropList(dragDropItem);
      }
    }
  }
}