import React, { useCallback } from "react";

import classNames from "classnames";

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

import css from "./TButtonTab.module.less";
import TButtonTabItem from "./TButtonTabItem";

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

export const LIST_TYPE = {
  large: "large",
  medium: "medium",
  small: "small",
};

export const RIGHT_BUTTON_TYPE = {
  sort: "sort",
};

export default function TButtonTab({
  className,
  selectedIndex,
  onItemClick,
  contents = [],
  noMarquee = false,
  listType = LIST_TYPE.medium,
  spotlightId,
  ...rest
}) {
  const onClick = useCallback(
    (index) => (e) => {
      if (onItemClick) {
        onItemClick({ index, e });
      }
    },
    [selectedIndex]
  );

  return (
    <Container
      className={classNames(css.tabs, css[listType], className)}
      {...rest}
    >
      {contents.map((item, index) => {
        return (
          <TButtonTabItem
            key={`buttonTabItem ${index}`}
            selected={index === selectedIndex}
            onClick={onClick(index)}
            index={index}
            selectedTabIndex={selectedIndex}
            noMarquee={noMarquee}
            listType={listType}
          >
            {item}
          </TButtonTabItem>
        );
      })}
    </Container>
  );
}
