import React from "react";

import classNames from "classnames";

import Scroller from "@enact/sandstone/Scroller";
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
import Spottable from "@enact/spotlight/Spottable";

import css from "./CategoryNav.module.less";

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

const SpottableComponent = Spottable("li");

export default function CategoryNav({
  categoryInfos,
  currentLgCatCdIndex,
  onCategoryNavClick,
  ...rest
}) {
  return (
    <Container {...rest} className={css.container}>
      <Scroller
        direction="horizontal"
        horizontalScrollbar="hidden"
        noScrollByWheel={true}
        scrollMode="translate"
      >
        <ul>
          {categoryInfos &&
            categoryInfos.map(({ lgCatNm, lgCatCd }, index) => {
              return (
                <SpottableComponent
                  className={classNames(
                    css.category,
                    currentLgCatCdIndex === index && css.selected
                  )}
                  key={lgCatCd}
                  onClick={() => onCategoryNavClick(lgCatCd, index)}
                >
                  <div>
                    <span className={css[`category-icon-${lgCatCd}`]} />
                  </div>
                  <strong>{lgCatNm}</strong>
                </SpottableComponent>
              );
            })}
        </ul>
      </Scroller>
    </Container>
  );
}
