import React, { useCallback, useEffect } from "react";

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

import { scaleH, scaleW } from "../../../utils/helperMethods";
import QuickMenuItem from "../QuickMenu/QuickMenuItem/QuickMenuItem";
import css from "./QuickMenu.module.less";

const LIST_ITEM_CONF = {
  ITEM_WIDTH: 138,
  ITEM_HEIGHT: 138,
};

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

export default function QuickMenu({
  brandInfo,
  selectedPatnrId,
  setSelectedPatnrId,
  ...rest
}) {
  const handleQuickMenuClick = useCallback(
    (patnrId) => {
      if (selectedPatnrId === patnrId) {
        return;
      }

      setSelectedPatnrId(patnrId);
    },
    [selectedPatnrId]
  );

  const renderItem = useCallback(
    ({ index, ...rest }) => {
      return (
        <QuickMenuItem
          brandInfo={brandInfo}
          index={index}
          selectedPatnrId={selectedPatnrId}
          onQuickMenuClick={handleQuickMenuClick}
          {...rest}
        />
      );
    },
    [brandInfo, selectedPatnrId, handleQuickMenuClick]
  );

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