import { render, screen } from "@testing-library/react";
import { describe, it, expect, vi } from "vitest";
import { WidgetRenderer } from "./WidgetRenderer";
import type { WidgetPlacement } from "@mosaic/shared";

vi.mock("@/components/widgets", () => ({
  TasksWidget: ({ id }: { id: string }): React.JSX.Element => <div>Tasks Widget {id}</div>,
  CalendarWidget: ({ id }: { id: string }): React.JSX.Element => <div>Calendar Widget {id}</div>,
  QuickCaptureWidget: ({ id }: { id: string }): React.JSX.Element => (
    <div>Quick Capture Widget {id}</div>
  ),
  AgentStatusWidget: ({ id }: { id: string }): React.JSX.Element => (
    <div>Agent Status Widget {id}</div>
  ),
  OrchestratorEventsWidget: ({ id }: { id: string }): React.JSX.Element => (
    <div>Orchestrator Events Widget {id}</div>
  ),
}));

function createWidgetPlacement(id: string): WidgetPlacement {
  return {
    i: id,
    x: 0,
    y: 0,
    w: 2,
    h: 2,
  };
}

describe("WidgetRenderer", () => {
  it("renders hyphenated quick-capture widget IDs correctly", () => {
    render(<WidgetRenderer widget={createWidgetPlacement("quick-capture-123")} />);
    expect(screen.getByText("Quick Capture Widget quick-capture-123")).toBeInTheDocument();
  });

  it("renders hyphenated agent-status widget IDs correctly", () => {
    render(<WidgetRenderer widget={createWidgetPlacement("agent-status-123")} />);
    expect(screen.getByText("Agent Status Widget agent-status-123")).toBeInTheDocument();
  });

  it("renders hyphenated orchestrator-events widget IDs correctly", () => {
    render(<WidgetRenderer widget={createWidgetPlacement("orchestrator-events-123")} />);
    expect(
      screen.getByText("Orchestrator Events Widget orchestrator-events-123")
    ).toBeInTheDocument();
  });
});