import React from "react";

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

import SectionTitle from "../../../components/SectionTitle/SectionTitle";
import { $L } from "../../../utils/helperMethods";
import SearchItemResults from "./SearchItemResults/SearchItemResults";
import css from "./SearchResults.module.less";
import SearchShowResults from "./SearchShowResults/SearchShowResults";
import SearchThemeResults from "./SearchThemeResults/SearchThemeResults";

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

export default function SearchResults({
  themeDatas,
  itemDatas,
  showDatas,
  themeCount,
  itemCount,
  showCount,
  query,
}) {
  return (
    <Container className={css.container}>
      {themeDatas && (
        <>
          <SectionTitle title={$L("Hot Picks")} />
          <SearchThemeResults themeDatas={themeDatas} themeCount={themeCount} />
        </>
      )}
      {showDatas && (
        <>
          <SectionTitle title={$L("Shows")} itemCount={showCount} />
          <SearchShowResults showDatas={showDatas} showCount={showCount} />
        </>
      )}
      {itemDatas && (
        <>
          <SectionTitle title={$L("Items")} itemCount={itemCount} />
          <SearchItemResults
            itemDatas={itemDatas}
            itemCount={itemCount}
            query={query}
          />
        </>
      )}
    </Container>
  );
}
