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
 *
 * @additionalProperties false
 */
export interface DfCircleToggleGroupConfig extends Omit<DfInteractiveBaseConfig, 'hint'> {
  /**
   * Specifies the type of the field as `CIRCLE_TOGGLE_GROUP`.
   */
  type: typeof DfCircleToggleGroupTypeName;

  /**
   * Configuration for all options to be displayed on a page.
   */
  options: DfCircleToggle[];
}

/**
 * @additionalProperties false
 */
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-ndbx.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;
}