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

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

interface NxMaskWithMaskConfig {
  /**
   * 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;

  /**
   * isIban cannot be set when the user set nxMask
   */
  isIban?: never;

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

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

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

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

  /**
   * Custom error message for validation
   */
  errorMessage?: string;
}

interface NxMaskIbanOnlyConfig {
  /**
   * Boolean to determine if input is iban type
   */
  isIban: boolean;

  /**
   * When `isIban` is set, properties such as `nxMask`, `separators`, `dropSpecialCharacters`, `convertTo`, and `validateMask` cannot be set.
   */
  nxMask?: never;
  separators?: never;
  dropSpecialCharacters?: never;
  convertTo?: never;
  validateMask?: never;

  /**
   * Custom error message for validation
   */
  errorMessage?: string;
}

export type NxMaskConfiguration = NxMaskWithMaskConfig | NxMaskIbanOnlyConfig;

/**
 * Configuration for a dynamic input field.
 */
export interface DfInputBaseConfig extends DfInteractiveBaseConfig, SingleInputFieldLayout {
  /**
   * Specifies the type of the field as `INPUT`.
   */
  type: typeof DfInputTypeName;

  /**
   * 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;

  /**
   * 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://ngx-brand-kit.frameworks.allianz.io/documentation/mask/overview
   */
  nxMask?: NxMaskConfiguration;

  /**
   * 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;

  /**
   * Text that is additionally displayed in the label if the field is not mandatory.
   * @examples ["Optional"]
   */
  optionalLabel?: string;
}

export interface DfInputNumberConfig extends DfInputBaseConfig {
  /**
   * 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: 'number';
  /**
   * The field's initial value as a number.
   * @examples [42]
   */
  value?: number;
}

export interface DfInputTextConfig extends DfInputBaseConfig {
  /**
   * 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' | 'password' | 'search' | 'tel' | 'text' | 'url';
  /**
   * The field's initial value as a string.
   * @examples ["hello@example.com", "#ff0000"]
   */
  value?: string;
}

export type DfInputConfig = DfInputNumberConfig | DfInputTextConfig;