import { InjectionToken } from '@angular/core';
import { DfBaseComponent } from './base.component';
import { DfComponentConfig, type 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<T = Record<string, unknown>> extends DfBaseComponent<
  DfCustomComponentConfig<T>
> {}

export const CUSTOM_COMPONENT_TYPE = 'CUSTOM_COMPONENT';

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

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