import React, { useCallback } from "react";

import classNames from "classnames";
import { useDispatch } from "react-redux";

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

import defaultImageItem from "../../../../../assets/images/img-thumb-empty-product@3x.png";
import { pushPanel } from "../../../../actions/panelActions";
import CustomImage from "../../../../components/CustomImage/CustomImage";
import { panel_names } from "../../../../utils/Config";
import css from "./TCHH.module.less";

const SpottableComponent = Spottable("div");
const Container = SpotlightContainerDecorator(
  {
    enterTo: "last-focused",
    leaveFor: { right: "", down: "" },
  },
  "div"
);

export default function TCHH({
  className,
  data,
  orders,
  onSpotlightDown,
  onSpotlightUp,
  onItemClick,
  sendLogClick,
}) {
  const dispatch = useDispatch();

  const spotName = "hotpicks-data-spot" + orders;

  const handleItemClick = useCallback(
    (index) => {
      let typeChk =
        data && data[0].hotelInfos?.length !== 0 ? "hotel" : "theme";
      if (onItemClick) {
        onItemClick();
      }

      if (sendLogClick) {
        sendLogClick();
      }
      dispatch(
        pushPanel({
          name: panel_names.DETAIL_PANEL,
          panelInfo: {
            patnrId: data[0].patnrId,
            prdtId: data[0].productInfos[0].prdtId,
            curationId: data[0].curationId,
            curationNm: data[0].curationNm,
            type: typeChk,
            bgImgNo: index + 1,
          },
        })
      );
    },
    [data, dispatch]
  );

  const handleFocus = (e) => {
    e.stopPropagation();
    e.preventDefault();
  };

  const _onSpotlightDown = useCallback((ev) => {
    ev.stopPropagation();
    ev.preventDefault();
    onSpotlightDown(ev);
  }, []);
  const _onSpotlightUp = useCallback((ev) => {
    ev.stopPropagation();
    ev.preventDefault();
    onSpotlightUp(ev);
  }, []);
  return (
    <>
      {data &&
        data.map(({ bgImgPath, curationNm, tmpltCd }) => {
          return (
            <div
              key={tmpltCd}
              className={classNames(className && className, css.halfWrap)}
            >
              <Container>
                {bgImgPath &&
                  bgImgPath.slice(0, 2).map((imgpath, idx) => {
                    return (
                      <SpottableComponent
                        key={idx}
                        spotlightId={
                          idx === 0 ? spotName : spotName + "_" + idx
                        }
                        onClick={() => {
                          handleItemClick(idx);
                        }}
                        onSpotlightDown={_onSpotlightDown}
                        onSpotlightUp={_onSpotlightUp}
                        onFocus={handleFocus}
                        index={idx}
                        aria-label={
                          "selected " + curationNm + " " + idx * 1 + 1 + " of 2"
                        }
                      >
                        <CustomImage
                          delay={0}
                          animationSpeed="fast"
                          src={imgpath}
                          fallbackSrc={defaultImageItem}
                          alt={curationNm}
                          ariaLabel={
                            "selected " +
                            curationNm +
                            " " +
                            idx * 1 +
                            1 +
                            " of 2"
                          }
                        />
                      </SpottableComponent>
                    );
                  })}
              </Container>
            </div>
          );
        })}
    </>
  );
}
