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

export interface InputrangeNumberLocaleConfig {
  /**
   * Locale configuration for min input placeholder.
   */
  minPlaceholder?: string;

  /**
   * Locale configuration for max input placeholder.
   */
  maxPlaceholder?: string;
}

/**
 * InputRangeNumber component props
 */
export interface InputRangeNumberProps {
  /**
   * Number modelValue of the input.
   */
  modelValue?: number[];

  /**
   * Initial Form value.
   */
  value?: number[];

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

  /**
   * Placeholder for both input
   *
   * @default undefined
   */
  placeholder?: string;

  /**
   * Specify the min number input placeholder.
   *
   * @default - Default value of Locale Config {@link InputrangeNumberLocaleConfig.minPlaceholder}
   */
  minPlaceholder?: string;

  /**
   * Specify the max number input placeholder.
   *
   * @default - Default value of Locale Config {@link InputrangeNumberLocaleConfig.maxPlaceholder}
   */
  maxPlaceholder?: string;

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

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

  /**
   * Show the text (opsional)
   *
   * @default true if mandatory true - Used by FilterContainer and QuickFilter
   */
  showOptionalText?: boolean;

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

  /**
   * Set the field name for Min Value Input
   *
   * @example 'duration.start' or 'duration[0]'
   */
  minFieldName?: string;

  /**
   * Set the field name for Max Value Input
   *
   * @example 'duration.end' or 'duration[1]'
   */
  maxFieldName?: string;

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

  /**
   * Set custom validator message.
   * Will be show if invalid="true" and useValidator="true"
   */
  validatorMessage?: string | CustomValidation<'empty'>;
}

/**
 * InputRangeNumber component emits
 */
export type InputRangeNumberEmits = {
  /**
   * Emits when the both input already filled.
   */
  'update:modelValue': [payload?: (number | undefined)[]];
  /**
   * Triggered by pressing Enter on field. Used to trigger Quick Filter.
   */
  'submit': [];
};

/**
 * **WangsVue - InputRangeNumber**
 *
 * _Handle input range number._
 *
 * --- ---
 * ![WangsVUe](https://www.wangsit.id/wp-content/uploads/2023/12/cropped-Logo_Wangsid-removebg-preview-192x192.png)
 *
 * @group form
 */
declare class InputRangeNumber extends ClassComponent<
  InputRangeNumberProps,
  InputRangeNumberEmits,
  unknown
> {}

export default InputRangeNumber;