import type { ComputedRef, CSSProperties, Ref, VNode } from 'vue';
import { TreeNodeProps } from './props';
export type { ScrollTo } from '../vc-virtual-list/List';

export interface DataNode {
  checkable?: boolean;
  children?: DataNode[];
  disabled?: boolean;
  disableCheckbox?: boolean;
  icon?: IconType;
  isLeaf?: boolean;
  key: string | number;
  title?: any;
  selectable?: boolean;
  switcherIcon?: IconType;

  /** Set style of TreeNode. This is not recommend if you don't have any force requirement */
  class?: string;
  style?: CSSProperties;
  slots?: Record<string, string>;
}

export interface EventDataNode extends DataNode {
  expanded: boolean;
  selected: boolean;
  checked: boolean;
  loaded: boolean;
  loading: boolean;
  halfChecked: boolean;
  dragOver: boolean;
  dragOverGapTop: boolean;
  dragOverGapBottom: boolean;
  pos: string;
  active: boolean;
  dataRef: DataNode;
  eventKey: Key; // 兼容 v2， 推荐直接用 key
}

export type IconType = any;

export type Key = string | number;

export type NodeElement = VNode<TreeNodeProps>;

export type DragNodeEvent = {
  eventData: ComputedRef<EventDataNode>;
  eventKey: ComputedRef<Key>;
  selectHandle: Ref<HTMLSpanElement>;
  pos: ComputedRef<string>;
};
export interface Entity {
  node: NodeElement;
  index: number;
  key: Key;
  pos: string;
  parent?: Entity;
  children?: Entity[];
}

export interface DataEntity extends Omit<Entity, 'node' | 'parent' | 'children'> {
  node: DataNode;
  parent?: DataEntity;
  children?: DataEntity[];
  level: number;
}

export interface FlattenNode {
  parent: FlattenNode | null;
  children: FlattenNode[];
  pos: string;
  data: DataNode;
  title: any;
  key: Key;
  isStart: boolean[];
  isEnd: boolean[];
}

export type GetKey<RecordType> = (record: RecordType, index?: number) => Key;

export type GetCheckDisabled<RecordType> = (record: RecordType) => boolean;

export type Direction = 'ltr' | 'rtl' | undefined;

export interface FieldNames {
  title?: string;
  key?: string;
  children?: string;
}