import React, { useCallback } from 'react';

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

import CategoryNavItem from '../CategoryNav/CategoryNavItem/CategoryNavItem';
import css from './CategoryNav.module.less';

const LIST_ITEM_CONF = {
  ITEM_WIDTH: 210 * 2,
  ITEM_HEIGHT: 236 * 2,
  SAPCING: 30 * 2,
};

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

export default function CategoryNav({
  categoryInfos,
  currentCategoryCode,
  onCategoryNavClick,
  ...rest
}) {
  const renderItem = useCallback(
    ({ index, ...rest }) => {
      return (
        <CategoryNavItem
          categoryInfos={categoryInfos}
          currentCategoryCode={currentCategoryCode}
          onCategoryNavClick={onCategoryNavClick}
          index={index}
          {...rest}
        />
      );
    },
    [categoryInfos, currentCategoryCode, onCategoryNavClick]
  );

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