import type { CSSProperties } from 'vue';

export type JsonPrettyNodeProps = {
  data: any;
  rootPath: string;
  indent: number;
  showLength: boolean;
  showDoubleQuotes: boolean;
  renderNodeKey: any;
  renderNodeValue: any;
};
export interface NodeDataType extends JSONFlattenReturnType {
  id: number;
}

export interface JSONFlattenOptions {
  key?: string;
  index?: number;
  showComma: boolean;
  length: number;
  type:
    | 'content'
    | 'objectStart'
    | 'objectEnd'
    | 'objectCollapsed'
    | 'arrayStart'
    | 'arrayEnd'
    | 'arrayCollapsed';
}

export type JSONDataType =
  | string
  | number
  | boolean
  | unknown[]
  | Record<string, unknown>
  | null;

export interface JSONFlattenReturnType extends JSONFlattenOptions {
  content: string | number | null | boolean;
  level: number;
  path: string;
}

export type StyleValue =
  | false
  | null
  | undefined
  | string
  | CSSProperties
  | Array<StyleValue>;

// 定义 Props 类型
type SelectableType = 'single' | 'multiple' | null;

export type TreeNodeProps = Partial<{
  data: any;
  indent: number;
  showLength: boolean;
  showDoubleQuotes: boolean;
  selectableType: SelectableType;
  showSelectController: boolean;
  showLine: boolean;
  showLineNumber: boolean;
  showNodeActions: boolean;
  selectOnClickNode: boolean;
  highlightSelectedNode: boolean;
  showIcon: boolean;
  theme: string;
  showKeyValueSpace: boolean;
  editable: boolean;
  editableTrigger: string;
  node: NodeDataType;
  checked: boolean;
  collapsed: boolean;
  customStyle?: CSSProperties;
  fontSize: string;
  onNodeClick: (node: NodeDataType) => void;
  onNodeMouseover: (node: NodeDataType) => void;
  onBracketsClick: (collapsed: boolean, node: NodeDataType) => void;
  onIconClick: (collapsed: boolean, node: NodeDataType) => void;
  onValueChange: (value: boolean, path: string) => void;
  onSelectedChange: (node: NodeDataType) => void;
}> &
  TreeNodeRequiredProps;

export type TreeNodeRequiredProps = {
  node: NodeDataType;
  rootPath: string;
  nodeSelectable: (node: NodeDataType) => boolean;
};

export type TreeRequired = TreeNodeRequiredProps & {};

export type Tree = Partial<TreeNodeProps> &
  Partial<
    {
      deep: number;
      collapsedNodeLength: number;
      virtual: boolean;
      itemHeight: number;
      height: number;
      selectedValue: string | Array<any>;
      collapsedOnClickBrackets: boolean;
      style: CSSProperties;
      pathCollapsible: (node: NodeDataType) => boolean;
      /** 超过行数将会自动启用虚拟列表 */
      autoVirtualRow: number;
      showCopyAll: boolean;
    } & TreeRequired
  >;

export interface ScrollEvent {
  detail: {
    scrollLeft: number; // 横向滚动距离
    scrollTop: number; // 纵向滚动距离
    scrollHeight: number; // 可滚动区域的高度
    scrollWidth: number; // 可滚动区域的宽度
    deltaX: number; // 横向滚动增量
    deltaY: number; // 纵向滚动增量
  };
  target: EventTarget; // 事件源组件
  currentTarget: EventTarget; // 当前组件
  timeStamp: number; // 事件触发时间戳
  type: string; // 事件类型，这里是 'scroll'
}