import {
  ComponentFactoryResolver,
  ComponentRef,
  Directive,
  EventEmitter,
  Injector,
  Input,
  OnInit,
  Output,
  ViewContainerRef
} from "@angular/core";
import { IDynamicBaseControl, DYNAMIC_CONTROL_TYPE, IDyanmicHelpControl } from "../interfaces/dynamic-control.interface";
import { InputComponent } from "../components/input/input.component";
import { FormGroup, FormControl } from '@angular/forms';
import { SingleDateComponent } from '../components/date/single-date.component';
import { DateRangeComponent } from '../components/date/date-range.component';
import { SingleNumberComponent } from '../components/number/single-number.component';
import { NumberRangeComponent } from '../components/number/number-range.component';
import { BaseDropdownComponent } from '../components/dropdown/base-dropdown.component';
import { HelpComponent } from '../components/help/help.component';

const componentMapper = new Map();
componentMapper.set(DYNAMIC_CONTROL_TYPE.HELP, HelpComponent);
componentMapper.set(DYNAMIC_CONTROL_TYPE.BASE_DROPDOWN, BaseDropdownComponent);
componentMapper.set(DYNAMIC_CONTROL_TYPE.DATE_RANGE, DateRangeComponent);
componentMapper.set(DYNAMIC_CONTROL_TYPE.NUMBER_RANGE, NumberRangeComponent);
componentMapper.set(DYNAMIC_CONTROL_TYPE.SINGLE_DATE, SingleDateComponent);
componentMapper.set(DYNAMIC_CONTROL_TYPE.SINGLE_NUMBER, SingleNumberComponent);
componentMapper.set(DYNAMIC_CONTROL_TYPE.TEXT, InputComponent);

@Directive({
  selector: "[dynamicFormControl]"
})
export class DynamicFormControlDirective implements OnInit {
  @Input()
  data: IDynamicBaseControl;

  @Input()
  formGroup: FormGroup;

  componentRef: ComponentRef<any>;
  constructor(
    private resolver: ComponentFactoryResolver,
    private container: ViewContainerRef,
    private injector: Injector
  ) {}

  ngOnInit() {
    this.formGroup = this.addToForm(this.data, this.formGroup);
    const factory = this.resolver.resolveComponentFactory(
      componentMapper.get(this.data.control.controlType)
    );
    this.componentRef = this.container.createComponent(factory);
    this.componentRef.instance.form = this.formGroup;
    this.componentRef.instance.control = this.data;
    // const form = this.addToForm(this.data, this.formGroup);
  }

  addToForm(control: IDynamicBaseControl, originalForm: FormGroup) {
    //originalForm 外部传入FormGroup的实例
    originalForm.addControl(control.labelCode, new FormControl(control.value));
    if (control.control.controlType === DYNAMIC_CONTROL_TYPE.HELP) {
      const helpControl = control as IDyanmicHelpControl;
      originalForm.addControl(helpControl.control.hiddenInputName, new FormControl(''));
    }
    return originalForm;
  }
}