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

/**
 * Definition of the type - dynamic circle toggles
 */
export const DfCircleToggleGroupTypeName = 'CIRCLE_TOGGLE_GROUP';

/**
 * Definition of circle toggles
 */
export interface DfCircleToggleGroupConfig
  extends Omit<DfInteractiveBaseConfig, 'hint' | 'columnSpan'> {
  /**
   * Specifies the type of the field as `CIRCLE_TOGGLE_GROUP`.
   */
  type: typeof DfCircleToggleGroupTypeName;

  /**
   * Configuration for all options to be displayed on a page.
   * For the best user experience, retail journeys should not have more than 3 options.
   */
  options: DfCircleToggle[];

  /**
   * 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 layout of the field.
   */
  layout?: {
    /**
     * This size of each option.
     * By default, each option takes 4 columns but you have an option to configure it to 2 or 3 columns.
     * For the best user experience, a 2-column span should be used only in expert journeys when `fullWidthFormInExpert` is set to `true`.
     * @default 4
     *
     */
    optionsColumnSpan?: 2 | 3 | 4;
    /**
     * Controls alignment for the circle toggle options.
     * Set to `true` to left-align the options. Defaults to center alignment. Ignored in retail journeys.
     * @default false
     *
     */
    optionsLeftAlignInExpert?: boolean;
  };

  /**
   * The initially selected option value.
   * Must match the `value` of one of the configured options.
   * @examples ["option-1"]
   */
  value?: string;
}

export interface DfCircleToggle {
  /**
   * Value of the option to be used as a form value when the option is selected.
   */
  value: string;

  /**
   * The label to be displayed as bold text under the option.
   * It's translatable by default and supports string interpolation.
   * @examples ["Option 1", "My option {$['bb-pgr-simple'].person.firstName}"]
   */
  label: string;

  /**
   * The hint text to be displayed under the label.
   * It's translatable by default and supports string interpolation.
   * @examples ["Hint 1", "My hint {$['bb-pgr-simple'].person.firstName}"]
   */
  hint?: string;

  /**
   * Name of the icon representing the option.
   * Available icon names can be found in the NDBX documentation: https://ngx-brand-kit.frameworks.allianz.io/documentation/icon/overview.
   * @examples ["product-car-front", "product-house"]
   *
   */
  icon?: string;

  /**
   * Path to an SVG file to be used as the icon for this option.
   * @examples ["assets/images/car-b-crash.svg"]
   */
  svg?: string;

  /**
   * Path to an SVG file to be used as the icon when this option is selected.
   * @examples ["assets/images/car-b-crash_active.svg"]
   */
  svgChecked?: string;

  /**
   * Text displayed in the option.
   * It's translatable by default and supports string interpolation.
   * @examples ["Option 1", "My option {$['bb-pgr-simple'].person.firstName}"]
   */
  circleText?: string;
}