import React from "react";
import { render, screen } from "@testing-library/react-native";
import { Option, Select } from ".";
import { PortalHostWrapper } from "../utils/test";

describe("Select composable statics + coexistence", () => {
  it("exposes the composable parts as statics on Select", () => {
    expect(Object.keys(Select)).toEqual(
      expect.arrayContaining([
        "Root",
        "Trigger",
        "Value",
        "Label",
        "Content",
        "Item",
        "Group",
        "GroupLabel",
        "Separator",
      ]),
    );
  });

  it("renders through the public statics with no react-hook-form context", () => {
    render(
      <Select.Root>
        <Select.Label>City</Select.Label>
        <Select.Trigger>
          <Select.Value placeholder="Select a city" />
        </Select.Trigger>
        <Select.Content>
          <Select.Item value="tor" label="Toronto" />
        </Select.Content>
      </Select.Root>,
      { wrapper: PortalHostWrapper },
    );

    expect(
      screen.getByText("City", { includeHiddenElements: true }),
    ).toBeDefined();
    expect(screen.getByTestId("ATL-Select-Trigger")).toBeDefined();
  });

  it("keeps the legacy props-driven Select callable and renders Option", () => {
    render(
      <Select onChange={jest.fn()}>
        <Option value="tor">Toronto</Option>
        <Option value="van">Vancouver</Option>
      </Select>,
    );

    // Legacy trigger testID is preserved and does not collide with the
    // composable trigger's ATL-Select-Trigger.
    expect(screen.getByTestId("ATL-Select")).toBeDefined();
    expect(screen.queryByTestId("ATL-Select-Trigger")).toBeNull();
  });
});