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;
  /**
   * Applies the inverse styling to the whole form. Only supported with the A1 design, ignored otherwise.
   * The form also gets the inverse background with the responsive surface padding (24px to 40px depending on the breakpoint) and an 8px border radius. The padding and radius are not applied when the `NoMargin` experimental feature is enabled.
   * @default false
   */
  inverse?: 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];