import React from "react";

import classNames from "classnames";

import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";

import { SpotlightIds } from "../../utils/SpotlightIds";
import TScroller from "../TScroller/TScroller";
import css from "./TBody.module.less";

const Container = SpotlightContainerDecorator(
  { enterTo: "last-focused" },
  "div"
);

const DefaultContainer = SpotlightContainerDecorator(
  { enterTo: "default-element" },
  "div"
);
export default function TBody({
  cbScrollTo,
  children,
  className,
  scrollable = true,
  spotlightId,
  scrollOptions = {},
  onScrollStop,
  onScroll,
  isDefaultContainer = false,
  ...rest
}) {
  const SelectedContainer = isDefaultContainer ? DefaultContainer : Container;

  return (
    <SelectedContainer
      spotlightId={spotlightId}
      id={SpotlightIds.TBODY}
      {...rest}
      className={classNames(css.tBody, className)}
    >
      {scrollable ? (
        <TScroller
          className={css.tScroller}
          cbScrollTo={cbScrollTo}
          onScrollStop={onScrollStop}
          onScroll={onScroll}
          {...scrollOptions}
        >
          {children}
        </TScroller>
      ) : (
        children
      )}
    </SelectedContainer>
  );
}
