import { TextareaHTMLAttributes } from 'vue';

import { CustomValidation } from '../form';
import {
  ClassComponent,
  GlobalComponentConstructor,
  Nullable,
  Numberish,
} from '../ts-helpers.d';

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

  /**
   * @example 'Max. {maxLength} characters' - maxLength will be replaced with props.maxLength
   */
  exceedMaxLengthInvalidText?: string;

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

/**
 * Defines valid properties in Textarea component. In addition to these, all properties of TextareaHTMLAttributes can be used in this component.
 * @extends TextareaHTMLAttributes
 */
export interface TextareaProps
  extends /* @vue-ignore */ TextareaHTMLAttributes {
  /**
   * The model value of text area.
   */
  modelValue?: Nullable<string>;

  /**
   * 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?: Nullable<string>;

  /**
   * Set invalid input state. And show validatorMessage if available.
   */
  invalid?: boolean;

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

  /**
   * When present, height of textarea changes as being typed.
   * @defaultValue true
   */
  autoResize?: boolean | undefined;

  /**
   * Whether 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 custom validator message.
   * Will be show if invalid="true" or in some conditions. {@link Condition}
   *
   * @example: 'This field is required'
   * @example: { empty: 'This field is required' }
   */
  validatorMessage?: string | CustomValidation<'empty' | 'exceed'>;

  /**
   * 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 'textareaInput'
   */
  fieldName?: string;

  /**
   * Show information to user about the field with a tooltip.
   */
  fieldInfo?: string;

  /**
   * Make the field mandatory.
   */
  mandatory?: boolean;

  /**
   * The maximum character length allowed by validator.
   *
   * @default unlimited
   * @deprecated - use maxlength instead. To show validator message for 'exceed' condition, set `preventInputOnMaxLength` to `false`
   */
  maxInput?: number;

  /**
   * The maximum character length allowed on input.
   *
   * @default unlimited
   */
  maxlength?: number;

  /**
   * Prevent input once the max length is reached, allowing only backspace.
   *
   * @default true
   */
  preventInputOnMaxLength?: boolean;

  inputClass?: string;

  /**
   * The number of visible text lines for the control. If it is specified, it must be a positive integer. If it is not specified, the default value is 5.
   * @default 5
   */
  rows?: Numberish;

  /**
   * The visible width of the text control, in average character widths. If it is specified, it must be a positive integer. If it is not specified, the default value is unlimited.
   * @default undefined - The width will fit available space.
   */
  cols?: Numberish;

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

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

/**
 * Defines valid emits in Textarea component.
 */
export type TextareaEmits = {
  /**
   * Emitted when the value changes.
   */
  'update:modelValue': [value: Nullable<string>];
};

/**
 * **TSVue - Textarea**
 *
 * _Textarea is a multi-line text input element._
 *
 * --- ---
 * ![TSVue](https://www.wangsit.id/wp-content/uploads/2023/12/cropped-Logo_Wangsid-removebg-preview-192x192.png)
 *
 * @group Component
 *
 */
declare class Textarea extends ClassComponent<
  TextareaProps,
  unknown,
  TextareaEmits
> {}

declare module '@vue/runtime-core' {
  interface GlobalComponents {
    Textarea: GlobalComponentConstructor<Textarea>;
  }
}

export default Textarea;