import React, { useEffect } from 'react';

import Spotlight from '@enact/spotlight';
import SpotlightContainerDecorator
  from '@enact/spotlight/SpotlightContainerDecorator';
import Spottable from '@enact/spotlight/Spottable';

import { $L } from '../../../utils/helperMethods';
import css from './QuickMenu.module.less';

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

const SpottableComponent = Spottable("li");

export default function QuickMenu({
  brandList,
  selectedBrandId,
  onQuickMenuClick,
  ...rest
}) {
  const handleClick = (patnrId) => {
    if (selectedBrandId === patnrId) {
      return;
    }

    onQuickMenuClick(patnrId);
  };

  useEffect(() => {
    const element = document.getElementById(selectedBrandId);
    Spotlight.focus(element);
  }, []);

  return (
    <Container {...rest} className={css.container}>
      <ul>
        {brandList &&
          brandList.map(({ logoImgAlt, logoImgPath, newFlag, patnrId }) => {
            return (
              <SpottableComponent
                className={patnrId === selectedBrandId && css.selected}
                id={patnrId}
                key={patnrId}
                onClick={() => handleClick(patnrId)}
              >
                {newFlag === "Y" && (
                  <span className={css.newBagde}>{$L("NEW")}</span>
                )}
                <span className={css.outline} />
                <img src={logoImgPath} alt={logoImgAlt} />
              </SpottableComponent>
            );
          })}
      </ul>
    </Container>
  );
}
