import { Slot } from 'vue';

import { CustomValidation } from '../form';
import { ClassComponent } from '../ts-helpers';

export type InputNumberEvent = number | string | undefined;

export interface InputNumberLocaleConfig {
  /**
   * @example 'Tulis {label}' - label can be ommited, and if exist will be replaced with props.label
   */
  defaultPlaceholder?: string;

  /**
   * @example '{label} sudah ada' - label will be replaced with props.label
   */
  alreadyExistInvalidText?: string;

  /**
   * @example '{label} must not be empty' - label will be replaced with props.label
   */
  emptyInvalidText?: string;
}

/**
 * InputNumber component props
 */
export interface InputNumberProps {
  /**
   * Number modelValue of the input.
   */
  modelValue?: number;

  /**
   * Sets the initial value of the field.
   * This will only available with option 'useValidator'.
   *
   * In use case like edit form, you need to display the previous inputted value.
   */
  value?: number;

  /**
   * Existing values to be checked with validation 'exist' - check the validatorMessage props
   *
   * - Need to specify the custom validation : { empty: 'Error message when empty' } within props validatorMessage
   */
  existingValues?: number[];

  /**
   * The input label. Tell the user what input is this.
   */
  label?: string;

  /**
   * Min input number value.
   */
  min?: number;

  /**
   * Max input number value.
   */
  max?: number;

  /**
   * The maximum input length.
   *
   * @default 16 digit number
   */
  maxDigit?: number;

  /**
   * Set the pad start of value.
   *
   * Insert '0' in the front of value
   * @default 1
   */
  padStart?: number;

  /**
   * Weather the input should be validated with vee-validator or not.
   * If you use this component within form input, you need to set this props as true.
   */
  useValidator?: boolean;

  /**
   * This prop is required if you use this component in a form input.
   * Specify the unique field name, match with your needs for API request.
   *
   * @default 'numberInput'
   */
  fieldName?: string;

  /**
   * Whether this input field is required or not.
   */
  mandatory?: boolean;

  /**
   * Set custom validator message.
   * Will be show if invalid="true"
   */
  validatorMessage?: string | CustomValidation;

  /**
   * Show the validator message on error.
   *
   * @default true;
   */
  showValidatorMessage?: boolean;

  /**
   * Specify the input placeholder.
   *
   * @default 'Enter {label}' or 'Enter number'
   */
  placeholder?: string;

  /**
   * Disabled the input.
   */
  disabled?: boolean;

  /**
   * State of invalid input.
   */
  invalid?: boolean;

  /**
   * Displays increment/decrement buttons.
   */
  showButtons?: boolean;

  /**
   * Defines the behavior of the component.
   * @defaultValue decimal
   */
  mode?: 'decimal' | 'currency';

  /**
   * The currency to use in currency formatting. Possible values are the [ISO 4217 currency codes](https://www.six-group.com/en/products-services/financial-information/data-standards.html#scrollTo=maintenance-agency), such as 'USD' for the US dollar, 'EUR' for the euro, or 'CNY' for the Chinese RMB.
   * There is no default value; if the style is 'currency', the currency property must be provided.
   */
  currency?: string | undefined;

  /**
   * The `locale` variable specifies the regional setting or language preference to be used.
   * It is an optional string that can influence date, time, number formatting, and other locale-specific operations.
   *
   * If not provided, the system may default to a pre-configured or fallback locale.
   */
  locale?: string;

  /**
   * Text to display before the value.
   */
  prefix?: string | undefined;

  /**
   * Text to display after the value.
   */
  suffix?: string | undefined;

  /**
   * The minimal digits of decimal value.
   */
  minFractionDigits?: number;

  /**
   * The maximal digits of decimal value.
   */
  maxFractionDigits?: number;

  /**
   * Whether to use grouping separators, such as thousands separators or thousand/lakh/crore separators.
   * @defaultValue false
   */
  useGrouping?: boolean;

  /**
   * Show information about the field.
   */
  fieldInfo?: string;

  /**
   * The filed info tooltip position
   */
  tooltipPos?: 'top' | 'right' | 'bottom' | 'left';

  /**
   * Specify the appearance of addon right and left
   * - filled - has background and border
   * - plain - no background, no border
   *
   * @defaultValue filled
   */
  addonVariant?: 'filled' | 'plain';

  /**
   * Class to be bind on addon left component
   */
  addonLeftClass?: any;

  /**
   * Class to be bind on addon left component
   */
  addonRightClass?: any;

  /**
   * Class to be bind on input group component
   */
  inputGroupClass?: any;

  /**
   * Class to be bind on input number component
   */
  inputNumberClass?: any;

  /**
   * Unique id for input number element
   */
  inputId?: string;

  /**
   * Set auto Resize Input
   * The input width is counted by the value length
   *
   * @default false
   */
  autoResize?: boolean;

  /**
   * Allow input to have value null or undefined.
   * If it sets to 'false', when the value is empty, it will fall back to min value if exists, zero otherwise
   *
   * @default true
   */
  allowEmptyValue?: boolean;
}

/**
 * InputNumber component emits
 */
export type InputNumberEmits = {
  /**
   * Emits when the input has losen focus.
   * The model value is the valid value from given min and max number.
   *
   * If the inputed number is above max, return the max. And vice versa.
   */
  'update:modelValue': [payload?: number];

  /**
   * If you need to check validation, you can use this events.
   */
  'input': [payload?: number];
};

export interface InputNumberSlots {
  'addon-left': Slot;
  'addon-right': Slot;
  /**
   * Slot for content in the right side of field label
   */
  'field-label-addon': Slot;
  'validatormessage': Slot;
}

/**
 * **WangsVue - InputNumber**
 *
 * _Handle input number with form validation._
 *
 * --- ---
 * ![WangsVue](https://www.wangsit.id/wp-content/uploads/2023/12/cropped-Logo_Wangsid-removebg-preview-192x192.png)
 *
 * @group form
 */
declare class InputNumber extends ClassComponent<
  InputNumberProps,
  InputNumberEmits,
  InputNumberSlots
> {}

export default InputNumber;