import React from "react";
import { render, screen, userEvent } from "@testing-library/react-native";
import { SelectContent } from "./SelectContent";
import { SelectItem } from "./SelectItem";
import { SelectTrigger } from "./SelectTrigger";
import { SelectRoot } from "../SelectRoot";
import { SelectPrimitive } from "../../primitives/Select";
import { PortalHostWrapper } from "../../utils/test";

const user = userEvent.setup();

beforeAll(() => {
  const MockNativeMethods = require("react-native/jest/MockNativeMethods");
  const mockedMethods = MockNativeMethods.default ?? MockNativeMethods;
  mockedMethods.measure.mockImplementation(
    (
      callback: (
        x: number,
        y: number,
        width: number,
        height: number,
        pageX: number,
        pageY: number,
      ) => void,
    ) => {
      callback(0, 0, 320, 48, 20, 100);
    },
  );
});

function renderContent() {
  return render(
    <SelectRoot>
      <SelectTrigger>
        <SelectPrimitive.Value placeholder="Select an option" />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="tor" label="Toronto" />
        <SelectItem value="van" label="Vancouver" />
      </SelectContent>
    </SelectRoot>,
    { wrapper: PortalHostWrapper },
  );
}

describe("Select.Content", () => {
  it("renders nothing until the trigger opens it", async () => {
    renderContent();

    expect(screen.queryByText("Toronto")).toBeNull();

    await user.press(screen.getByTestId("ATL-Select-Trigger"));

    expect(screen.getByText("Toronto")).toBeDefined();
  });

  it("folds the portal, overlay, and viewport into one part", async () => {
    renderContent();
    await user.press(screen.getByTestId("ATL-Select-Trigger"));

    // The single Select.Content renders the tap-outside overlay plus the items
    // (portaled + scrolled via the folded Viewport).
    expect(screen.getByTestId("ATL-Select-Overlay")).toBeDefined();
    expect(screen.getByText("Toronto")).toBeDefined();
    expect(screen.getByText("Vancouver")).toBeDefined();
  });
});