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

export interface InputPhoneNumberLocaleConfig {
  defaultPlaceholder?: string;
  emptyInvalidText?: string;
}

/**
 * InputPhoneNumber component props
 */
export interface InputPhoneNumberProps {
  /**
   * ModelValue of the input.
   *
   * @example '+62 821748578' - Dial Code (+62) separated by space with phone number
   *
   */
  modelValue?: string;
  /**
   * Sets the initial value of the field.
   * This will only available with option 'useValidator'.
   *
   * In usecase like edit form, you need to display the previous inputted value.
   */
  value?: string;
  /**
   * The input label. Tell the user what input is this.
   */
  label?: string;
  /**
   * Specify the input placeholder.
   *
   * @default 'Enter phone number'
   */
  placeholder?: string;
  /**
   * Disabled the input.
   */
  disabled?: boolean;
  /**
   * The maximum input length.
   *
   * @default 14 digit number
   */
  maxDigit?: number;
  /**
   * State of invalid input.
   */
  invalid?: boolean;
  /**
   * Wether the input should be validated with vee-validate 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;
  /**
   * Wether this input field is required or not.
   */
  mandatory?: boolean;
  /**
   * Set the custom validator message.
   * By default each field has preserved with its validator message, you don't need to worrying about the message.
   */
  validatorMessage?: string | CustomValidation<'empty'>;
  /**
   * Show information about the field.
   */
  fieldInfo?: string;
}

/**
 * InputPhoneNumber component emits
 */
export type InputPhoneNumberEmits = {
  /**
   * Emits when the input already filled.
   */
  'update:modelValue': [value?: string];
};

/**
 * **WangsVue - InputPhoneNumber**
 *
 * _Handle input phone number with dial code dropdown select and form validation_
 *
 * --- ---
 * ![WangsVue](https://www.wangsit.id/wp-content/uploads/2023/12/cropped-Logo_Wangsid-removebg-preview-192x192.png)
 *
 * @group form
 */
declare class InputPhoneNumber extends ClassComponent<
  InputPhoneNumberProps,
  unknown,
  InputPhoneNumberEmits
> {}

export default InputPhoneNumber;