import { DfBaseConfig } from '../../base';

export interface DfFormWithLayout<FIELDS = DfBaseConfig[]> {
  layout: DfFormLayout;
  fields: FIELDS;
}

export const DfFormLayout = {
  OneColumn: 'ONE_COLUMN',
  TwoColumn: 'TWO_COLUMN',
  ThreeColumn: 'THREE_COLUMN',
  FourColumn: 'FOUR_COLUMN',
  CustomColumn: 'CUSTOM_COLUMN'
} as const;
export type DfFormLayout = (typeof DfFormLayout)[keyof typeof DfFormLayout];

export const DfFormLayoutClassName: { [key in DfFormLayout]: string } = {
  ONE_COLUMN: 'single-column',
  TWO_COLUMN: 'two-column-element',
  THREE_COLUMN: 'three-column-element',
  FOUR_COLUMN: 'four-column-element',
  CUSTOM_COLUMN: ''
};
export type DfFormLayoutClassName =
  (typeof DfFormLayoutClassName)[keyof typeof DfFormLayoutClassName];

/**
 * Helper interface that can be used to extend the component.
 * Then you can call the "getFormsWithLayout" method and get a form with fields.
 * @example
 * ```typescript
 *  export interface MyComponentConfig extends DfFormAndFields {}
 *
 *  const forms = DfFormLayoutUtils.getFormsWithLayout(this.config);
 * ```
 */
export interface DfFormAndFields<FIELDS = DfBaseConfig[]> {
  /** If provided will generate the forms as provided by config **/
  forms?: DfFormWithLayout<FIELDS>[];
  /**
   * If 'fields' provided, will create a single form with the fields
   */
  fields?: FIELDS;
  /**
   * If 'fields' is provided, will use the defaultLayout as the generated form 'Fields' layout.
   * If not provided will generate a OneColumn Dynamic Form
   */
  defaultLayout?: DfFormLayout;
}