import { useInject } from "@brushy/di";

import { createToken, useInject } from "@brushy/di";

const USER_SERVICE = createToken<UserService>("USER_SERVICE");

function UserList() {
  const userService = useInject(USER_SERVICE); // type inferred - no <UserService>

  // Use the service
  const [users, setUsers] = useState([]);

  useEffect(() => {
    userService.getUsers().then(setUsers);
  }, [userService]);

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

// With options
const userService = useInject(USER_SERVICE, {
  // Disable promise caching
  cachePromises: false,

  // Use a specific scope
  scope: requestScope,
});

function UserProfile({ userId }) {
  const userService = useInject(USER_SERVICE);

  // This promise will be automatically cached
  const user = use(userService.getUserById(userId));

  return <div>{user.name}</div>;
}

import { useInjectLazy } from "@brushy/di";

function ReportGenerator() {
  const reportService = useInjectLazy<ReportService>("REPORT_SERVICE");
  const [report, setReport] = useState(null);

  const generateReport = async () => {
    const data = await reportService.generate();
    setReport(data);
  };

  return (
    <div>
      <button onClick={generateReport}>Generate Report</button>
      {report && <ReportViewer data={report} />}
    </div>
  );
}

const reportService = useInjectLazy<ReportService>("REPORT_SERVICE", {
  scope: requestScope,
});

import { Container, BrushyDIProvider } from "@brushy/di";

// Create the container
const container = new Container({
  providers: [
    // ... provider configuration
  ],
});

// Application with provider
function App() {
  return (
    <BrushyDIProvider container={container}>
      <YourApp />
    </BrushyDIProvider>
  );
}

import {
  Container,
  BrushyDIProvider,
  createToken,
  useInject,
  useInjectLazy,
} from "@brushy/di";
import { useState, useEffect } from "react";

// Tokens
const USER_SERVICE = createToken<UserService>("USER_SERVICE");
const ANALYTICS_SERVICE = createToken<AnalyticsService>("ANALYTICS_SERVICE");

// Services
class UserService {
  async getUsers() {
    return fetch("/api/users").then((r) => r.json());
  }
}

class AnalyticsService {
  trackEvent(name, data) {
    console.log(`Event: ${name}`, data);
  }
}

// Container
const container = new Container();
container.register(USER_SERVICE, { useClass: UserService });
container.register(ANALYTICS_SERVICE, { useClass: AnalyticsService });

// Component
function UserList() {
  const userService = useInject(USER_SERVICE);
  const analyticsService = useInjectLazy(ANALYTICS_SERVICE);
  const [users, setUsers] = useState([]);

  useEffect(() => {
    userService.getUsers().then(setUsers);
  }, [userService]);

  const trackClick = () => {
    analyticsService.trackEvent("user_list_clicked", { count: users.length });
  };

  return (
    <div onClick={trackClick}>
      <h1>Users</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

// App
export default function App() {
  return (
    <BrushyDIProvider container={container}>
      <UserList />
    </BrushyDIProvider>
  );
}