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

import { useDispatch, useSelector } from "react-redux";

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

import noGroupImg from "../../../../assets/images/img-my-info-billing@3x.png";
import { pushPanel } from "../../../actions/panelActions";
import TScroller from "../../../components/TScroller/TScroller";
import { panel_names } from "../../../utils/Config";
import { $L } from "../../../utils/helperMethods";
import css from "./GroupOption.module.less";

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

const SpottableComponent = Spottable("div");

export default function OptionGroup() {
  const dispatch = useDispatch();
  const groupInfos = useSelector((state) => state.product.groupInfo);
  const productData = useSelector((state) => state.main.productData);
  const handleGroupItemClick = useCallback(
    (idx) => () => {
      dispatch(
        pushPanel({
          name: panel_names.DETAIL_PANEL,
          panelInfo: {
            patnrId: groupInfos[idx].patnrId,
            prdtId: groupInfos[idx].prdtId,
          },
        })
      );
    },
    [dispatch, groupInfos]
  );

  useEffect(() => {
    if (groupInfos && groupInfos.length > 0) {
      Spotlight.focus(`groupOtion_0`);
    } else {
      Spotlight.focus("spotlightId_backBtn");
    }
  }, [groupInfos]);

  return (
    <Container>
      <TScroller verticalScrollbar="auto" className={css.optionGroupScroll}>
        <p className={css.optionDesc}>
          {$L("Select from below to view the full product details.")}
        </p>
        {groupInfos && groupInfos.length > 0 ? (
          groupInfos.map((group, idx) => {
            const ariaLabel =
              "selected " +
              group.prdtNm +
              ", sale price" +
              group.priceInfo.split("|")[1] +
              ", " +
              (idx + 1) +
              " of " +
              groupInfos.length +
              ", go to details, button";
            return (
              <SpottableComponent
                className={css.groupOptionInfo}
                key={`groupInfos:${idx}`}
                onClick={handleGroupItemClick(idx)}
                spotlightId={`groupOtion_${idx}`}
                aria-label={ariaLabel}
              >
                <div className={css.productName}>{group.prdtNm}</div>

                <div className={css.priceInfo}>
                  <div className={css.priceAfter}>
                    {`${group.priceInfo.split("|")[1]}`}
                  </div>
                  <div className={css.priceBefore}>
                    {`${group.priceInfo.split("|")[0]}`}
                  </div>
                </div>
              </SpottableComponent>
            );
          })
        ) : (
          <div
            className={css.noItems}
            aria-label="There are no items in this group"
          >
            <img src={noGroupImg} alt="" />
            <div>{$L("There are no items in this group.")}</div>
          </div>
        )}
      </TScroller>
      <div className={css.disclaimerContainer}>{productData.disclaimer}</div>
    </Container>
  );
}
