import { DfInteractiveBaseConfig, DfOptions } from '@allianz/taly-core/dynamic-form';

/**
 * The value to use for the `type` attribute of radiobutton group
 * formfield configs.
 */
export const DfRadioTypeName = 'RADIO';

/**
 * Configuration for a dynamic radiobutton group field.
 */
export interface DfRadioConfig extends Omit<DfInteractiveBaseConfig, 'hint'> {
  /**
   * Specifies the type of the field as `RADIO`.
   */
  type: typeof DfRadioTypeName;

  /**
   * This field's label.
   * It's translatable by default and supports string interpolation.
   * @examples ["My label", "My label {$['bb-pgr-simple'].person.firstName}"]
   */
  label: string;

  /**
   * The "options" property can take one of two forms:
   * 1. A hardcoded array of objects for direct display in a radio group. Each object must have a "label" to display and a corresponding "value".
   * 2. A string that represents an expression. This expression is used by an option provider service to dynamically fetch the radio options.
   *
   * @examples [[{"label": "The first option", "value": "1"}], "$.myExpression"]
   */
  options: DfOptions[] | string;

  /**
   * The layout of the field.
   */
  layout?: VerticalLayout | HorizontalLayout;
}

interface HorizontalLayout extends BaseLayout {
  /**
   * Option to enable horizontal layout via configuration
   * @default false
   */
  horizontal: true;
}

export interface VerticalLayout extends BaseLayout {
  /**
   * Option to enable horizontal layout via configuration
   * @default false
   */
  horizontal?: false;
  /**
   * Option to left-align the group label in retail journeys.
   * This option is applicable to vertical layouts only.
   * The left-align label uses the same column span as the options. For long labels, it's recommended to set `optionsColumnSpan` to 6 or 12.
   * @default false
   */
  groupLabelLeftAlignInRetail?: boolean;
}

interface BaseLayout {
  /**
   * This size of each option.
   * By default, each option takes 4 columns but you have an option to configure it to 3, 6 or 12 columns.
   * For the best user experience, a 3-column span should be used only in expert journeys when `fullWidthFormInExpert` is set to `true`.
   * For horizontal groups, a maximum of 3 options per row is allowed in retail journeys and expert journeys with half-width forms to maintain readability and spacing consistency.
   * For expert journeys with full-width forms, horizontal groups can have up to 4 options per row.
   * @default 4
   *
   */
  optionsColumnSpan?: 3 | 4 | 6 | 12;
}