import { MenuItem } from '../menuitem';
import { ClassComponent } from '../ts-helpers.d';

export interface ButtonBulkActionLocaleConfig {
  /**
   * @example `{length} data selected`
   */
  currentSelectionMessage?: string;

  /**
   * @description Label for when all records have been selected.
   * @example 'Select all ({totalRecords} data)' - totalRecords - The total number of records available to select.
   */
  allRecordSelected?: string;

  /**
   * @description Label for the "Select All" option in a bulk action button.
   * @example `Select all ({totalRecords} items)` - totalRecords - The total number of records available to select.
   */
  selectAllRecords?: string;
}

export interface ButtonBulkActionProps {
  /**
   * Disable the button.
   */
  disabled?: boolean;
  /**
   * An array of data objects to be included in an action.
   * Use as 'v-model:selectedData' to automatically reset on Cancel or Apply.
   */
  selectedData: Record<string, any>[];
  /**
   * The total selectable data. This is optional when working with dynamic data table,
   * just define tableName, the component will handle the rest for you
   *
   */
  totalRecords?: number;
  options: MenuItem[];
  /**
   * Multiple bulk action mounted at the same time will cause unexpected behavior.
   *
   * You need to set the appropriate id the same with the table-name where the bulkaction used for.
   */
  tableName?: string;
  /**
   * Specify the select manue type. Default to overlay-panel
   *
   * @default overlay-panel
   * @default dropdown - for wangsvue-acts
   *
   * @options dropdown overlay-panel
   */
  selectMenuType?: 'dropdown' | 'overlay-panel';
  /**
   * Specify the name/label for selected data.
   *
   * @example 'Asset(s)' will be displayed as '3 Asset(s) Selected'
   * @default 'Data' for all packages
   */
  naming?: string;
}

export interface ButtonBulkActionSlots {
  /**
   * Use additional slot like input field.
   * The button Apply will be shown if the selected option use additional slot.
   *
   * @slotprops selectedOption the current selected option/action. you can do conditional based on this slotprops.
   */
  addition(selectedOption: MenuItem): () => any;
}

export type ButtonBulkActionEmits = {
  /**
   * Emits when Apply button is clicked.
   *
   * By default, 'command' on MenuItem will be executed.
   * With this event, You can do additional actions.
   */
  'apply': [];
  /**
   * Emits when Cancel or Apply button is clicked.
   */
  'update:selectedData': [datas: Record<string, unknown>[]];
};

/**
 * **WangsVue - ButtonBulkAction**
 *
 * _ButtonBulkAction is a component for handling bulk action for multiple data at once._
 *
 * --- ---
 * ![WangsVue](https://www.wangsit.id/wp-content/uploads/2023/12/cropped-Logo_Wangsid-removebg-preview-192x192.png)
 *
 * @group buttons
 */
declare class ButtonBulkAction extends ClassComponent<
  ButtonBulkActionProps,
  ButtonBulkActionSlots,
  ButtonBulkActionEmits
> {}

export default ButtonBulkAction;