import * as React from "react";
import { Focusable } from "@applicaster/zapp-react-native-ui-components/Components/Focusable/FocusableTvOS";
import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";

type Props = {
  id: string;
  groupId: string;
  isParallaxDisabled: boolean;
  applyWrapper: boolean;
  children: (focused: boolean) => React.ReactNode;
  onFocus: (arg1: any, index?: number) => void;
  onBlur: Callback;
};

export const FocusableWrapper = ({
  id,
  groupId,
  isParallaxDisabled,
  children,
  applyWrapper,
  onFocus,
  onBlur,
}: Props) => {
  if (applyWrapper) {
    return (
      <Focusable
        id={id}
        groupId={groupId}
        isParallaxDisabled={isParallaxDisabled}
        onFocus={onFocus}
        onBlur={onBlur}
        willReceiveFocus={noop}
        hasReceivedFocus={noop}
        // @ts-ignore
        offsetUpdater={noop}
        isFocusable
      >
        {(focused) => children(focused)}
      </Focusable>
    );
  }

  return <>{children(false)}</>;
};