import React from "react";
import { render } from "@testing-library/react-native";
import { View } from "react-native";

import { HookContentFocusGroup } from "../hookFocus/index.web";

const mockFocusableGroupSpy = jest.fn();
const mockUseInitialFocusSpy = jest.fn();

const mockModalState = { isRunningInBackground: false };

jest.mock("../../FocusableGroup", () => ({
  FocusableGroup: (props) => {
    const React = require("react");
    const { View } = require("react-native");

    mockFocusableGroupSpy(props);

    return <View testID="focusable-group">{props.children}</View>;
  },
}));

jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
  useContentId: () => "quick-brick-content___route",
  useNavbarId: () => "quick-brick-navbar___route",
  usePathname: () => "hooks-modal/profile-select",
}));

jest.mock("../../Screen/TV/hooks", () => ({
  useInitialFocus: () => mockUseInitialFocusSpy(),
}));

jest.mock("../../../Contexts/ZappHookModalContext", () => ({
  useZappHookModalStore: (selector) => selector(mockModalState),
}));

describe("HookContentFocusGroup (web)", () => {
  beforeEach(() => {
    jest.clearAllMocks();
    mockModalState.isRunningInBackground = false;
  });

  it("wraps content in a preferred-focus content group and triggers initial focus when presented full screen", () => {
    const { getByTestId } = render(
      <HookContentFocusGroup>
        <View testID="child" />
      </HookContentFocusGroup>
    );

    expect(getByTestId("focusable-group")).toBeDefined();
    expect(getByTestId("child")).toBeDefined();
    expect(mockUseInitialFocusSpy).toHaveBeenCalledTimes(1);

    expect(mockFocusableGroupSpy).toHaveBeenCalledWith(
      expect.objectContaining({
        id: "quick-brick-content___route",
        groupId: "hooks-modal/profile-select",
        nextFocusUp: "quick-brick-navbar___route",
        preferredFocus: true,
        shouldUsePreferredFocus: true,
      })
    );
  });

  it("injects the content group id into the wrapped child so its cells register under it", () => {
    render(
      <HookContentFocusGroup>
        <View testID="child" />
      </HookContentFocusGroup>
    );

    const child = mockFocusableGroupSpy.mock.calls[0][0].children;

    expect(child.props.groupId).toBe("quick-brick-content___route");
  });

  it("renders the child without focus handling when running in background (not full screen)", () => {
    mockModalState.isRunningInBackground = true;

    const { getByTestId, queryByTestId } = render(
      <HookContentFocusGroup>
        <View testID="child" />
      </HookContentFocusGroup>
    );

    expect(getByTestId("child")).toBeDefined();
    expect(queryByTestId("focusable-group")).toBeNull();
    expect(mockUseInitialFocusSpy).not.toHaveBeenCalled();
    expect(mockFocusableGroupSpy).not.toHaveBeenCalled();
  });
});