import { CommonExternalProps } from 'react-json-tree';

export type JsonTreeMode = 'full' | 'compact' | 'inline';

export interface JsonTreeConfig {
  /** Maximum depth to expand automatically (default: 2) */
  maxAutoExpandDepth?: number;
  /** Maximum items in array to auto-expand (default: 10) */
  maxAutoExpandArrayItems?: number;
  /** Maximum object keys to auto-expand (default: 5) */
  maxAutoExpandObjectKeys?: number;
  /** Maximum string length before truncation (default: 200) */
  maxStringLength?: number;
  /** Collection limit for performance (default: 50) */
  collectionLimit?: number;
  /** Whether to show collection info (array length, object keys count) */
  showCollectionInfo?: boolean;
  /** Whether to show expand/collapse all buttons */
  showExpandControls?: boolean;
  /** Whether to show copy/download buttons */
  showActionButtons?: boolean;
  /** Custom CSS classes for the container */
  className?: string;
  /** Whether to preserve object key order (default: true) */
  preserveKeyOrder?: boolean;
  /** Font size for tree nodes (default: '12px' for compact/inline, '13px' for full) */
  fontSize?: string;
}

export interface JsonTreeComponentProps {
  title?: string;
  data: unknown;
  /**
   * Extra top offset in px for the floating toolbar — use when your layout
   * has a non-sticky header that useNavbarHeight cannot auto-detect.
   * Adds to the auto-detected navbar height.
   */
  toolbarOffset?: number;
  /**
   * Display mode:
   * - "full" (default): With toolbar and border
   * - "compact": No toolbar, subtle styling
   * - "inline": Minimal, no border
   */
  mode?: JsonTreeMode;
  config?: JsonTreeConfig;
  /** Override for react-json-tree props */
  jsonTreeProps?: Partial<CommonExternalProps>;
}

export const MODE_PRESETS: Record<JsonTreeMode, Partial<JsonTreeConfig>> = {
  full: {
    showExpandControls: true,
    showActionButtons: true,
    showCollectionInfo: true,
    fontSize: '13px',
  },
  compact: {
    showExpandControls: false,
    showActionButtons: false,
    showCollectionInfo: true,
    fontSize: '11px',
    maxAutoExpandDepth: 1,
  },
  inline: {
    showExpandControls: false,
    showActionButtons: false,
    showCollectionInfo: false,
    fontSize: '11px',
    maxAutoExpandDepth: 1,
  },
};
