import * as React from "react";
import { Platform } from "react-native";
import { useCellState } from "../MasterCell/utils";

type Props = {
  index: number;
  item: ZappEntry;
  focused: boolean;
  scrollTo?: (index: number) => void;
  CellRenderer: React.ComponentType<{ item: Object; state: string }>;
  behavior: Behavior;
};

const isAndroid = Platform.OS === "android";

export function FocusableCell(props: Props) {
  const {
    index,
    item,
    CellRenderer,
    focused,
    scrollTo = null,
    behavior,
  } = props;

  const state = useCellState({ id: item.id, behavior, focused });

  React.useEffect(() => {
    if (focused && scrollTo && !isAndroid) {
      scrollTo(index);
    }
  }, [focused]);

  return <CellRenderer item={item} state={state} />;
}