import { DefineComponent } from 'vue';
import { AssetName } from '@/types/assets.type';
import { DialogConfirmProps } from 'v2/DialogConfirm/DialogConfirm.vue.d';
import { TSVueIcons } from 'v2/Icon/Icon.vue.d';

/**
 * Type of the asset data, it refers to data response from Asset API, but since this component only using asset's name and _id then only those field are required for type.
 */
export type LinkedAsset = {
  _id: string;
  name: AssetName;
};

/**
 * Type of linked asset, it contains parent and its child(s).
 */
export type LinkedAssetFamily = {
  parent: LinkedAsset;
  children: LinkedAsset[];
};

/**
 * Props for DialogSelectAsset component
 */
export interface DialogLinkedAssetProps extends DialogConfirmProps {
  /**
   * The header of the dialog.
   */
  header: string;
  /**
   * The list of selected asset to be transacted.
   */
  lists?: LinkedAsset[];
  /**
   * The label of the dialog button.
   */
  label?: string;
  /**
   * The body text of the dialog.
   */
  confirmBody?: string;
  /**
   * Specify the custom header icon.
   * If not, the default rules by it severity.
   *
   * @default 'success' > hidden;
   * @default 'danger' > 'error';
   */
  headerIcon?: TSVueIcons;
  /**
   * @default - 'confirmation'
   */
  type?: 'detail' | 'confirmation';
}

/**
 * Emits for DialogSelectAsset component
 */
export type DialogLinkedAssetEmit = {
  /**
   * Emits when button confirm clicked.
   */
  'confirm': [families: LinkedAssetFamily[]];
  /**
   * Emits when the dialog is closed. Wether from cancel button, close button, or ESC button pressed.
   */
  'update:visible': [state: boolean];
};

/**
 * TSVue - DialogLinkedAsset
 *
 * DialogLinkedAsset is a component for creating dialog confirmation of linked assets.
 *
 * --- ---
 * ![TSVue](https://ik.imagekit.io/kurniadev/TS-HEAD-BLACK.png)
 *
 * @group components
 */
declare const DialogLinkedAsset: DefineComponent<
  DialogLinkedAssetProps,
  DialogLinkedAssetEmit
>;

export default DialogLinkedAsset;