import React, { useCallback } from "react";

import { VirtualGridList } from "@enact/sandstone/VirtualList";
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
import ri from "@enact/ui/resolution";

import SearchThemeCard from "./SearchThemeCard/SearchThemeCard";
import css from "./SearchThemeResults.module.less";

const LIST_ITEM_CONF = {
  ITEM_WIDTH: 560 * 2,
  ITEM_HEIGHT: 140 * 2,
  SPACING: 30 * 2,
};

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

export default function SearchThemeResults({
  themeDatas,
  themeCount,
  ...rest
}) {
  const renderItem = useCallback(
    ({ index, ...rest }) => {
      const themeData = themeDatas[index];

      return (
        <SearchThemeCard {...rest} key={themeData.contentId} {...themeData} />
      );
    },
    [themeDatas]
  );

  return (
    <Container className={css.container}>
      {themeDatas && (
        <VirtualGridList
          className={css.grid}
          dataSize={themeDatas.length}
          direction="horizontal"
          itemRenderer={renderItem}
          itemSize={{
            minWidth: ri.scale(LIST_ITEM_CONF.ITEM_WIDTH),
            minHeight: ri.scale(LIST_ITEM_CONF.ITEM_HEIGHT),
          }}
          spacing={ri.scale(LIST_ITEM_CONF.SPACING)}
          scrollMode="translate"
          horizontalScrollbar="hidden"
          noScrollByWheel
        />
      )}
    </Container>
  );
}
