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

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

export interface DfFormLayout {
  /**
   * Defines the column layout for the form (e.g. one to four columns or a custom layout).
   */
  type: DfFormLayoutType;
  /**
   * Whether headline fields should follow the layout columns or be displayed in full width.
   * Ignored in "CUSTOM_COLUMN" layout.
   * @default false
   */
  headlineWidthMatchesLayoutType?: boolean;
  /**
   * Whether paragraph fields should follow the layout columns or be displayed in full width.
   * Ignored in "CUSTOM_COLUMN" layout.
   * @default false
   */
  paragraphWidthMatchesLayoutType?: boolean;
  /**
   * Whether the form should be displayed in full width in expert journeys.
   * @default false
   */
  fullWidthFormInExpert?: boolean;
}

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

export const DfFormLayoutClassName: { [key in DfFormLayoutType]: 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];