import { TreeSelectionKeys } from 'primevue/tree';
import { Slot } from 'vue';

import { TreeNode } from '../basetree';
import { QueryParams, ShortFetchListResponse } from '../datatable';
import TreeInstance, { TreeProps } from '../tree';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers.d';

export interface DialogSelectTreeProps
  extends Omit<TreeProps, 'type' | 'filter'> {
  fetchTree?: (
    type: 'group' | 'category',
    params?: QueryParams,
  ) => Promise<ShortFetchListResponse<TreeNode> | undefined>;
  params?: QueryParams;
  visible?: boolean;
  type?: 'group' | 'category';
  /**
   * Specify wether the all tree node should be auto checked once it rendered.
   * @default false
   */
  autoSelectAll?: boolean;
  header?: string;
  subHeader?: string;
  selectionMode?: 'single' | 'checkbox';
  /**
   * Current behavior is preventing select if there is no node selected.
   *
   * @default true
   */
  allowEmptySelection?: boolean;
  /**
   * The previously selected tree key to be displayed again.
   */
  keys?: string[] | number[];
  /**
   * The lists to be displayed in the dialog.
   */
  lists?: (string | object)[];
  /**
   * The label of the list if your list item is an object.
   * Choose a property from the item to be displayed on the list.
   */
  listLabel?: string;
  /**
   * Disable node 'All' selection
   */
  disableNodeAll?: boolean;
  /**
   * @deprecated
   */
  exactDisableKey?: string | number;
  /**
   * A list of node keys that should be disabled along with their children.
   */
  disableKeys?: string[] | number[];
  /**
   * A list of node keys that should be disabled, affecting only the specified nodes and not their children.
   */
  exactDisableKeys?: string[] | number[];

  /**
   * A function to determine when the node should be disabled,
   * When true, it will disabled selection on current node and all level childrend
   *
   * @return true to disabled
   */
  disableNodeWhen?: (node: TreeNode) => boolean;

  /**
   * Defines the tree is readonly and disabled.
   */
  readonly?: boolean;
  /**
   * Defines the group tree to showing disposable groups.
   */
  showDisposableGroups?: boolean;
  /**
   * Defines the tree to be flattened and shows disposable only
   */
  flattenDisposableNode?: boolean;
  /**
   * Defines the group tree to disable excluded keys
   */
  excludedKeys?: string[] | number[];
  /**
   * Render hidden dialog to trigger fetch tree
   */
  hidden?: boolean;

  /**
   * Determines whether the selection state of a node should propagate
   * both upward to its parent node and downward to its child nodes.
   *
   * @default true
   */
  propagateSelection?: boolean;
}

export type TreeSelectPayload = {
  keys: TreeSelectionKeys | undefined;
  selectedNodes: TreeNode[] | undefined;
  singleNode: TreeNode | undefined;
};

export type DialogSelectTreeEmits = {
  select: [keys?: TreeSelectPayload];
  hide: [];
};

export interface DialogSelectTreeSlots {
  header: Slot<{
    dialogHeader: string;
    subHeader?: string;
    lists?: (string | object)[];
    listLabel?: string;
    isLoading: boolean;
    filter: string;
    updateFilter: (newFilter?: string) => void; // Hooks to update internal state filter
  }>;

  /**
   * Slot to customize tree node item
   */
  treenode: Slot<{ node: TreeNode; checked: boolean; disabled: boolean }>;

  footer: Slot;
}

/**
 * **WangsVue - DialogSelectTree**
 *
 * --- ---
 * ![TSVue](https://ik.imagekit.io/kurniadev/TS-HEAD-BLACK.png)
 *
 * @group components
 */
declare class DialogSelectTree extends ClassComponent<
  DialogSelectTreeProps,
  DialogSelectTreeSlots,
  DialogSelectTreeEmits
> {
  treeComponent: TreeInstance;
}

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

export default DialogSelectTree;