import { DfInteractiveBaseConfig } from '@allianz/taly-core/dynamic-form';
import { MaskConversionTypes } from '@aposin/ng-aquila/mask';

/**
 * The value to use for the `type` attribute of input
 * formfield configs.
 */
export const DfInputTypeName = 'INPUT';

/**
 * @additionalProperties false
 */
export interface NxMaskConfiguration {
  /**
   * 0: digits (0 to 9 numbers)
   * A: letters (uppercase and lowercase), digits
   * S: letters (uppercase and lowercase)
   *
   * Thus, if you write 000-AAA this specifies a mask that consists of three
   * numbers and then three letters, with a separator in the middle
   */
  nxMask: string;

  /**
   * The default separators are /, (, ), ., :, -, +, , and space.
   */
  separators?: string[];

  /**
   * Remove special characters in the value output.
   * Default: false
   */
  dropSpecialCharacters?: boolean;

  /**
   * Mask should be part of the validation.
   * Default: true
   */
  validateMask?: boolean;

  /**
   * Convert mask, e.g. to upper case.
   * Default: No conversion.
   */
  convertTo?: MaskConversionTypes;
}

/**
 * Configuration for a dynamic input field.
 *
 * @additionalProperties false
 */
export interface DfInputConfig extends DfInteractiveBaseConfig {
  /**
   * Specifies the type of the field as `INPUT`.
   */
  type: typeof DfInputTypeName;

  /**
   * The type of input element to use.
   *
   * Only types supported by NDBX's Input component are permitted.
   *
   * Explanations for the different kinds of input can be found here:
   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
   *
   * Careful! When an nxMask is used, only "password", "search", "tel", "text", "url" are supported.
   */
  inputType: 'color' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url';

  /**
   * Placeholder to be displayed in the field when the input is empty.
   * It's translatable by default and supports string interpolation.
   * @examples ["Placeholder", "Placeholder with dynamic value {$['bb-pgr-simple'].date}"]
   */
  placeholder?: string;
  /**
   * Configuration of an ndbx input mask.
   * See the ndbx documentation on how to use the inputs:
   * https://api-test.allianz.com/ngx-ndbx-dev/my-viewer/documentation/mask/overview
   */
  nxMask?: NxMaskConfiguration;
  /**
   * Boolean to determine if input is iban type
   */
  isIban?: boolean;
  /**
   * Boolean to determine if input value needs to be formatted to uppercase
   */
  formatUpperCase?: boolean;

  /**
   * The maximum number of characters allowed for user input.
   */
  maxLength?: number;

  /**
   * Prefix text to place at the start of this field's input.
   * It's translatable by default and supports string interpolation.
   */
  inputPrefix?: string;

  /**
   * Suffix text to place at the end of this field's input.
   * It's translatable by default and supports string interpolation.
   */
  inputSuffix?: string;
}