import { InjectionToken } from '@angular/core';
import { DfBaseComponent } from './base.component';
import { DfComponentConfig, DfInteractiveBaseConfig } from './base.model';

/**
 * Extend this class to conveniently create a custom formfield component.
 * By extending this class, you get a consistent API for inputs & outputs
 * and ensure a working custom Dynamic Form component.
 */
export abstract class DfCustomComponent extends DfBaseComponent<DfCustomComponentConfig> {}

export const CUSTOM_COMPONENT_TYPE = 'CUSTOM_COMPONENT';

export interface DfCustomComponentConfig
  extends Omit<DfInteractiveBaseConfig, 'onValueChangesEvent' | 'onBlurEvent'> {
  type: typeof CUSTOM_COMPONENT_TYPE;
  name: string;
  config?: Record<string, unknown>;
}

export const CUSTOM_DYNAMIC_FORM_COMPONENT = new InjectionToken<DfComponentConfig[]>(
  'CUSTOM_DYNAMIC_FORM_COMPONENT'
);