import { DefineComponent } from 'vue';
import { QueryParams } from 'v2/DataTable/DataTable.vue.d';

export type FilterOption = {
  label: string;
  value?: string;
};

export type FetchUserOptionResponse = {
  divisionOptions: FilterOption[];
  positionOptions: FilterOption[];
};

/**
 * Props for DialogSelectUser component
 */
export interface DialogSelectUserProps {
  /**
   * The header of the dialog.
   *
   * @defaultValue "Select User"
   */
  header?: string;

  /**
   * The description of the table.
   *
   * @defaultValue "Select user"
   */
  description?: string;

  /**
   * Specifies the visibility of the dialog.
   * @defaultValue false
   */
  visible?: boolean | undefined;

  /**
   * List that will be show above the table
   * @defaultValue undefined
   */
  list?: string[];

  /**
   * Table's selection type
   * @defaultValue single
   */
  selectionType?: 'single' | 'checkbox';

  /**
   * The function to fetch data on DataTable mounted and on queryParams dependencies updated.
   *
   * @param params this is required
   */
  fetchFunction?: (params: QueryParams) => Promise<FetchResponse | undefined>;

  /**
   * The function to fetch options on DialogSelectUserFilter.
   *
   */
  fetchOptionFunction?: () => Promise<FetchUserOptionResponse | undefined>;
}

/**
 * Emits for DialogSelectUser component
 */
export type DialogSelectUserEmits = {
  /**
   * Emits when the dialog is closed. Wether from cancel button, close button, or ESC button pressed.
   */
  'update:visible': [state: boolean];

  /**
   * Emits when you done selected user.
   */
  'selected': [user: any];
};

/**
 * **TSVue - DialogSelectUser**
 *
 * --- ---
 * ![TSVue](https://ik.imagekit.io/kurniadev/TS-HEAD-BLACK.png)
 *
 * @group components
 */
declare const DialogSelectUser: DefineComponent<
  DialogSelectUserProps,
  DialogSelectUserEmits
>;

export default DialogSelectUser;