// eslint-disable-next-line @typescript-eslint/no-unused-vars
import { BadgeProps } from '../badge';
import { CustomValidation } from '../form';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers.d';

/**
 * InputBadge component props
 */
export interface InputBadgeProps {
  /**
   * The type of input, whether input text or input email
   *
   * @default text
   */
  type?: 'text' | 'email';
  /**
   * The model value. Used for input without validation.
   */
  modelValue?: 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.
   */
  initialValue?: string[];
  /**
   * Determines if the field uses a validator
   */
  useValidator?: boolean;
  /**
   * Exisitng values to be checkeed with validation 'exist' - check the validatorMessage props
   *
   * - Need to specify the custom validation : { empty: 'Error message when empty' } within props validatorMessage
   */
  existingValues?: string[];
  /**
   * Values that can be edited by the user.
   * Any new added label will considered as editable. You dont need to pass a reactive value this prop and update whenever new label is added.
   *
   * @default undefined - All values are editable.
   */
  editableValues?: string[];
  /**
   * List of values that can be removed. If not removable, the remove icon will be either disabled or hidden.
   *
   * Any new added label will considered as removable. You dont need to pass a reactive value this prop and update whenever new label is added.
   * @default undefined - All values are removable.
   */
  removableValues?: string[];

  /**
   * Specify the variant of the remove button on each badge.
   * By default, the remove button is hidden if the badge is not removable.
   * You can set this to 'disabled' to show the remove button but disable it.
   * @default hidden
   *
   * See {@link BadgeProps.disableRemoveButton}
   */
  removeButtonVariant?: 'disabled' | 'hidden';

  /**
   * While editing the badgem if it left empty, the badge will be restored to the previous value.
   * @default false -  The badge removed.
   */
  restoreValueOnEmpty?: boolean;

  /**
   * Determines if the field is mandatory
   */
  mandatory?: boolean;
  /**
   * Set custom validator message.
   */
  validatorMessage?: string | CustomValidation;
  /**
   * Whether shows the invalid message or not.
   * The validator message will be shown if useValidator true and the field label is specified.
   *
   * Sets this props to 'false' to force the validator message always hidden.
   *
   * @default true
   */
  showValidatorMessage?: boolean;
  /**
   * Set the invalid state.
   *
   * @default - If field is mandatory, the field will be considered invalid if the input is empty.
   */
  invalid?: 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 'inputBadge'
   */
  fieldName?: string;
  /**
   * The text input placholder.
   *
   * @default 'Enter value'
   */
  placeholder?: string;
  /**
   * Disabled state.
   */
  disabled?: boolean;
  /**
   * The field input label. Tell the user what input is this.
   */
  label?: string;
  /**
   * Show information to user about the field.
   */
  fieldInfo?: string;
  /**
   * If true, deleted badges will be replaced with `null` to preserve their index position.
   * Otherwise, the badge will be fully removed, shifting subsequent items.
   */
  preserveDeletedIndex?: boolean;
}

/**
 * InputBadge component emits
 */
export type InputBadgeEmits = {
  /**
   * Emits when a new label added.
   */
  'update:modelValue': [value: string[] | undefined];
};

/**
 * **WangsVue - InputBadge**
 *
 * _InputBadge is input text that changes it value into Badge component on Enter key pressed._
 *
 * --- ---
 * ![WangsVue](https://www.wangsit.id/wp-content/uploads/2023/12/cropped-Logo_Wangsid-removebg-preview-192x192.png)
 *
 * @group Component
 */
declare class InputBadge extends ClassComponent<
  InputBadgeProps,
  unknown,
  InputBadgeEmits
> {}

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

export default InputBadge;