import { Slot } from 'vue';

import { BadgeProps } from '../badge';
import { WangsIcons } from '../icon';

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

export type OptionValue = string | number | boolean | Record<string, any>;

export type Option = {
  label?: string;
  value?: OptionValue;
  visible?: boolean;
  icon?: WangsIcons;
  [key: string]: any;
};

/**
 * Configuration interface for localizing dropdown component placeholders and error messages.
 */
export interface DropdownLocaleConfig {
  /**
   * Placeholder text for the filter input field.
   *
   * @default undefined
   */
  filterPlaceholder?: string;

  /**
   * Placeholder text displayed while the dropdown is loading.
   *
   * @example 'Loading...'
   * @default undefined
   */
  loadingPlaceholder?: string;

  /**
   * Placeholder text for the input field when no selection has been made.
   *
   * This text can include a placeholder `{label}` which will be replaced with the value of `props.label`.
   *
   * @example 'Select {label}' - If `props.label` is 'Option', the placeholder will be 'Select Option'.
   * @example 'Select {lowercaseLabel}' - If `props.label` is 'Option', the placeholder will be 'Select option'.
   * @default undefined
   */
  inputPlaceholder?: string;

  /**
   * Error message displayed when no selection has been made.
   *
   * This message can include placeholders:
   * - `{label}`: Replaced with the value of `props.label`.
   * - `{formattedLabel}`: Replaced with the value of `props.label` formatted with an appropriate article (a/an).
   *
   * @example
   * // If `props.label` is 'Label', the error message will be:
   * '{label} must be picked' - 'Label must be picked'
   *
   * @example
   * // If `props.label` is 'user', the error message will be:
   * 'You must pick {formattedLabel}' - 'You must pick a user'
   *
   * @default undefined
   */
  emptySelectionErrorMessage?: string;
}

/**
 * Dropdown component props
 */
export interface DropdownProps {
  /**
   * Don't use modelValue with useValidator at the same time.
   * It may lead unexpected behavior.
   */
  modelValue?: OptionValue;

  /**
   * If you deals with form validation on edit form action, you can set the initial value of the field.
   */
  initialValue?: OptionValue;

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

  /**
   * List of options to display.
   */
  options?: Option[] | string[] | Record<string, any>;

  /**
   * Allows `null` to be treated as a valid selectable option in the dropdown.
   *
   * When enabled, `null` can be included in the options list and selected by the user.
   */
  allowNullOption?: boolean;

  /**
   * If the same option is selected again, the option is unselected.
   */
  unselectOnReselect?: boolean;

  /**
   * Specify the property name of option to be used as label.
   *
   * @default undefined - the label will be sets to the option itself.
   */
  optionLabel?: string;

  /**
   * Specify the property name of option to be used as value.
   *
   * @default undefined - the value will be sets to the option itself.
   */
  optionValue?: string;

  /**
   * Define the value style, whether badge or plain text
   *
   * @default 'plain'
   */
  valueType?: 'badge' | 'plain';

  /**
   * Bind the badge property to the dropdown value
   */
  badgeValueProps?: Omit<BadgeProps, 'label'>;

  /**
   * Set the input border style
   *
   * @default 'default'
   */
  inputBorder?: 'none' | 'default';

  /**
   * A property to uniquely identify an option.
   */
  dataKey?: string | undefined;

  /**
   * Determines if the field uses a validator
   */
  useValidator?: boolean;

  /**
   * Determines if the field is mandatory
   */
  mandatory?: boolean;

  /**
   * Show the text (opsional)
   *
   * @default true if mandatory true
   */
  showOptionalText?: boolean;

  /**
   * Set custom validator message.
   * It is rarely use, this component has handled the validator message.
   *
   *
   * @example: 'This field is required'
   * @example: { empty: 'This field is required' }
   */
  validatorMessage?: string | CustomValidation<'empty'>;

  /**
   * Wether to format the message
   *
   * @default true
   */
  formatValidatorMessage?: boolean;

  /**
   * Set custom invalid state.
   */
  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 'dropdown'
   */
  fieldName?: string;

  /**
   * Default text to display when no option is selected.
   *
   * @default `Select ${label}`
   */
  placeholder?: string;

  /**
   * Whether the dropdown is in loading state.
   * @defaultValue false
   */
  loading?: boolean;

  /**
   * Show icon 'info' on the right side of label.
   * Show information to user about the field on icon hover.
   */
  fieldInfo?: string;

  /**
   * Set disabled state for input dropdown.
   */
  disabled?: boolean;

  /**
   * Whether show the Dropdown option search or not.
   *
   * @default true,
   */
  filter?: boolean;

  /**
   * The filter input Placeholder
   *
   * @default 'Search'
   */
  filterPlaceholder?: string;

  /**
   * To determine whether dropdown panel width should fit its max content or not
   *
   * @default false
   */
  panelMaxContent?: boolean;
}

export interface DropdownSlots {
  'value': Slot<{ value: string; originalValue: any }>;
  'option': Slot<{ option: Option }>;
  'footer': Slot<{ options: Option[]; value: OptionValue }>;
  'addon-left': Slot;
  'addon-right': Slot;
}

/**
 * Dropdown component emits
 */
export type DropdownEmits = {
  /**
   * Emits when an option selected.
   */
  'update:modelValue': [value: OptionValue | undefined];

  /**
   * Emits when overlay shown.
   */
  'show': [];

  /**
   * Emits when the Field Info icon is clicked.
   */
  'fieldInfoClick': [];
};

/**
 * **WangsVue - Dropdown**
 *
 * _Dropdown also known as Select, is used to choose an item from a collection of options._
 *
 * --- ---
 * ![WangsVue](https://www.wangsit.id/wp-content/uploads/2023/12/cropped-Logo_Wangsid-removebg-preview-192x192.png)
 *
 * @group Component
 */
declare class Dropdown extends ClassComponent<
  DropdownProps,
  DropdownSlots,
  DropdownEmits
> {
  /**
   * Shows the overlay.
   *
   * @memberof MultiSelect
   */
  showOverlay(): void;
}

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

export default Dropdown;