import { DfBaseConfig } from '@allianz/taly-core/dynamic-form';
import { IconSize } from '@allianz/ng-aquila/icon';

/**
 * The value to use for the `type` attribute of paragraph
 * formfield configs.
 */
export const DfParagraphTypeName = 'PARAGRAPH';

export interface DfParagraphConfig extends DfBaseConfig {
  /**
   * Specifies the type of the field as `PARAGRAPH`.
   */
  type: typeof DfParagraphTypeName;

  /**
   * This field's label.
   * It's translatable by default and it supports string interpolation as well as
   * markdown formatting:
   * - Italic: `*text*` or `_text_`
   * - Bold: `**text**`
   * - Bold Italic: `***text***`
   * - Strikethrough: `~~text~~`
   * - Underline: `:u[text]`
   * - Links: `[text](url)`
   *
   * @examples [
   *   "My label",
   *   "Label with *italic*, **bold**, ~~strikethrough~~, :u[underline], and [link](https://example.com)",
   *   "My label {$['bb-pgr-simple'].person.firstName}"
   * ]
   */
  label: string;

  /**
   * The nxCopytext variant. This determines the visuals of the paragraph.
   */
  copytextOption?: 'small' | 'medium' | 'normal' | 'large';

  /**
   * Configuration of the icon to be place before the label.
   */
  icon?: IconDefinition;

  /**
   * Property to add css classes via configuration
   * @examples ["nx-font-weight-bold nx-margin-bottom-s"]
   */
  cssClasses?: string;
  /**
   * The layout of the field.
   */
  layout?: {
    /**
     * Controls paragraph text alignment for retail journeys. Set to `true` to left-align text. Defaults to centered alignment.
     * Ignored in expert journeys, which always use left alignment.
     * @default false
     */
    leftAlignInRetail?: boolean;
  };
}

export interface IconDefinition {
  /**
   * Name of the NDBX icon.
   * Available icon names can be found in the NDBX documentation: https://ngx-brand-kit.frameworks.allianz.io/documentation/icon/overview.
   * @examples ["info-circle", "exclamation-circle"]
   *
   */
  name: string;
  /**
   * Size of the icon
   */
  size: IconSize;
}