import { Slot } from 'vue';

import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';

export interface FieldWrapperLocaleConfig {
  /**
   * The indicator for mandatory field.
   * @default '*''
   */
  labelRequired?: string;

  /**
   * The indicator for optional field.
   * @default '(optional)''
   */
  labelOptional?: string;
}

/**
 * Props for the FieldWrapper component.
 */
export interface FieldWrapperProps {
  /**
   * The label text to display for the field.
   * @default undefined
   */
  label?: string;

  /**
   * Indicates whether the field is mandatory (required).
   * If `true`, this may trigger the display of a required indicator.
   * @default false
   */
  mandatory?: boolean;

  /**
   * When `true`, displays an "(optional)" text next to the label if the field is not mandatory.
   */
  showOptionalText?: boolean;

  /**
   * When `true`, displays an asterisk (`*`) next to the label if the field is mandatory.
   * @default false
   */
  showAsterisk?: boolean;

  /**
   * Additional information or description for the field.
   * Can be used to display tooltips or inline helper text.
   * @default undefined
   */
  info?: string;

  /**
   * Custom CSS class to apply to the label element.
   * Useful for styling the label specifically.
   * @default undefined
   */
  labelClass?: string;

  /**
   * Position of the tooltip, if one is displayed.
   * Accepted values are `'top'`, `'right'`, `'bottom'`, and `'left'`.
   * @default undefined
   */
  tooltipPos?: 'top' | 'right' | 'bottom' | 'left';
}

export interface FieldWrapperSlots {
  'label-addon': Slot;
}

export type FieldWrapperEmits = {
  /**
   * Emitted when the information (tooltip) is clicked.
   */
  infoClick: [];
};

/**
 * **WangsVue - FieldWrapper**
 *
 * _FieldWrapper is a component for wrapping form fields with labels and additional information._
 *
 * @group components
 */
declare class FieldWrapper extends ClassComponent<
  FieldWrapperProps,
  FieldWrapperSlots,
  FieldWrapperEmits
> {}

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

export default FieldWrapper;