import React from 'react';
import { ObjectView } from 'react-obj-view';
// Import the CSS styles
import 'react-obj-view/dist/react-obj-view.css';

const App = () => {
  const data = {
    user: {
      name: "John Doe",
      age: 30,
      preferences: {
        theme: "dark",
        notifications: true
      }
    },
    items: ["apple", "banana", "cherry"],
    metadata: {
      created: new Date(),
      tags: new Set(["react", "typescript"])
    }
  };

  return (
    <div>
      <h1>Data Inspector</h1>
      <ObjectView 
        value={data} 
        name="appData" 
        expandLevel={2} 
      />
    </div>
  );
};

// Expand all levels (use carefully with large objects)
<ObjectView value={data} expandLevel={true} />

// Expand first 3 levels
<ObjectView value={data} expandLevel={3} />

// Start collapsed
<ObjectView value={data} expandLevel={false} />

const complexData = {
  // Primitives
  name: "React Object View",
  version: 1.0,
  isActive: true,
  
  // Collections
  users: ["alice", "bob", "charlie"],
  userMap: new Map([
    ["alice", { role: "admin" }],
    ["bob", { role: "user" }]
  ]),
  tags: new Set(["react", "typescript", "visualization"]),
  
  // Advanced types
  createdAt: new Date(),
  pattern: /[a-z]+/gi,
  callback: (x) => x * 2,
  asyncData: Promise.resolve("Loaded successfully"),
  
  // Nested structures
  config: {
    api: {
      baseUrl: "https://api.example.com",
      timeout: 5000,
      retries: 3
    },
    features: {
      darkMode: true,
      notifications: false
    }
  }
};

<ObjectView 
  value={complexData} 
  name="appConfig"
  expandLevel={2}
  objectGrouped={50}  // Group objects with 50+ properties
  arrayGrouped={20}   // Group arrays with 20+ items
/>

const apiResponse = {
  status: 200,
  data: {
    users: [
      { id: 1, name: "Alice", email: "alice@example.com" },
      { id: 2, name: "Bob", email: "bob@example.com" }
    ],
    pagination: {
      page: 1,
      totalPages: 5,
      totalItems: 87
    }
  },
  headers: {
    "content-type": "application/json",
    "x-request-id": "abc-123"
  }
};

<ObjectView value={apiResponse} name="API Response" expandLevel={2} />

const [appState, setAppState] = useState({
  user: { name: "John", preferences: {...} },
  ui: { theme: "dark", sidebarOpen: true },
  data: { items: [...], loading: false }
});

// Visualize state changes
<ObjectView 
  value={appState} 
  name="Application State" 
  expandLevel={1} 
/>

const [counter, setCounter] = useState({ count: 0, lastUpdated: Date.now() });

const increment = () => {
  setCounter(prev => ({
    count: prev.count + 1,
    lastUpdated: Date.now()
  }));
};

return (
  <div>
    <button onClick={increment}>Increment</button>
    <ObjectView value={counter} expandLevel={true} />
  </div>
);

// Efficiently handles large datasets
const largeDataset = {
  users: new Array(1000).fill(null).map((_, i) => ({
    id: i,
    name: `User ${i}`,
    email: `user${i}@example.com`
  })),
  metadata: {
    total: 1000,
    generated: new Date()
  }
};

<ObjectView 
  value={largeDataset}
  arrayGrouped={50}    // Show 50 items before grouping
  objectGrouped={100}  // Show 100 properties before grouping
  expandLevel={1}      // Only expand first level initially
/>

import React from 'react';
import { ObjectView } from 'react-obj-view';

// Custom renderer for User class instances
class User {
  constructor(public name: string, public email: string) {}
}

const UserRenderer = ({ value, name, displayName, separator = ":" }) => (
  <div className="custom-user-view">
    {displayName && <span className="jv-name">{name}</span>}
    {displayName && <span>{separator}</span>}
    <span className="user-badge">👤 {value.name}</span>
    <span className="user-email">({value.email})</span>
  </div>
);

// Create custom render map
const customRenderers = new Map([
  [User, UserRenderer]
]);

const data = {
  currentUser: new User("John Doe", "john@example.com"),
  admin: new User("Admin", "admin@example.com")
};

<ObjectView 
  value={data} 
  customRender={customRenderers}
  expandLevel={2}
/>

// Disable change highlighting for performance
<ObjectView 
  value={frequentlyChangingData}
  highlightUpdate={false}
  expandLevel={1}
/>

// Enable highlighting (default behavior)
<ObjectView 
  value={data}
  highlightUpdate={true}
  expandLevel={1}
/>