import * as React from "react";
import { StyleSheet } from "react-native";
import { shallow } from "zustand/shallow";

import { FocusableGroup } from "../../FocusableGroup";
import {
  useContentId,
  useNavbarId,
  usePathname,
} from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
import { useZappHookModalStore } from "../../../Contexts/ZappHookModalContext";

import { useInitialFocus } from "../../Screen/TV/hooks";

const styles = StyleSheet.create({
  container: { flex: 1 },
});

type Props = {
  children: React.ReactElement;
};

/**
 * A general content screen presented as a full-screen hook is rendered straight
 * through `ComponentsMap`, bypassing the web `River` wrapper. That wrapper is what
 * normally creates the `quick-brick-content` FocusableGroup (with `preferredFocus`)
 * the focus manager relies on and what lets initial focus land on the content.
 *
 * Without it the hook screen renders but nothing is focusable on web TV. This
 * recreates that content group and triggers initial focus, mirroring `River`.
 */
const FocusedHookContent = ({ children }: Props) => {
  const contentId = useContentId();
  const navbarId = useNavbarId();
  const pathname = usePathname();

  useInitialFocus();

  return (
    <FocusableGroup
      id={contentId}
      // Nest under the hook-modal route so the focus manager treats this as the
      // active screen's content node; `useInitialFocus` targets the same route.
      groupId={pathname}
      nextFocusUp={navbarId}
      preferredFocus
      shouldUsePreferredFocus
      style={styles.container}
    >
      {React.cloneElement(children, { groupId: contentId })}
    </FocusableGroup>
  );
};

export const HookContentFocusGroup = ({ children }: Props) => {
  const isRunningInBackground = useZappHookModalStore(
    (state) => state.isRunningInBackground,
    shallow
  );

  // A hook presented full screen (either as a `/hooks/<id>` screen or a
  // full-screen modal) needs the content focus group. Only background runs,
  // which render invisibly, must be left alone so they don't steal focus.
  if (isRunningInBackground) {
    return <>{children}</>;
  }

  return <FocusedHookContent>{children}</FocusedHookContent>;
};