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 "./TCFI_2.module.less";

const SpottableComponent = Spottable("li");

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

export default function TCFI_2({
  className,
  data,
  orders,
  onSpotlightDown,
  onSpotlightUp,
  onItemClick,
  sendLogClick,
}) {
  const dispatch = useDispatch();
  const handleItemClick = (prdtId) => {
    if (onItemClick) {
      onItemClick();
    }

    if (sendLogClick) {
      sendLogClick();
    }
    dispatch(
      pushPanel({
        name: panel_names.DETAIL_PANEL,
        panelInfo: {
          patnrId: data[0].patnrId,
          themePrdtId: prdtId,
          prdtId: prdtId,
          curationId: data[0].curationId,
          curationNm: data[0].curationNm,
          type: "theme",
        },
      })
    );
  };
  const handleHotelClick = (hotelId) => {
    if (onItemClick) {
      onItemClick();
    }

    if (sendLogClick) {
      sendLogClick();
    }
    dispatch(
      pushPanel({
        name: panel_names.DETAIL_PANEL,
        panelInfo: {
          patnrId: data[0].patnrId,
          themeHotelId: hotelId,
          curationId: data[0].curationId,
          curationNm: data[0].curationNm,
          type: "hotel",
        },
      })
    );
  };

  const _onSpotlightDown = useCallback((ev) => {
    ev.stopPropagation();
    ev.preventDefault();
    onSpotlightDown(ev);
  }, []);
  const _onSpotlightUp = useCallback((ev) => {
    ev.stopPropagation();
    ev.preventDefault();
    onSpotlightUp(ev);
  }, []);
  const spotName = "hotpicks-data-spot" + orders;
  return (
    <>
      {data &&
        data.map(
          ({ bgImgPath, curationNm, tmpltCd, productInfos, hotelInfos }) => {
            return (
              <div key={tmpltCd} className={classNames(className && className)}>
                <div className={css.fullImg}>
                  <CustomImage
                    delay={0}
                    animationSpeed="fast"
                    src={bgImgPath}
                    fallbackSrc={defaultImageItem}
                    alt={curationNm}
                    ariaLabel={curationNm}
                  />
                </div>
                <Container className={css.itemList}>
                  {productInfos &&
                    productInfos
                      .slice(0, 2)
                      .map(({ imgUrl, prdtNm, prdtId }, index) => {
                        return (
                          <SpottableComponent
                            key={prdtId}
                            spotlightId={
                              index === 0 ? spotName : spotName + "_" + index
                            }
                            onClick={() => {
                              handleItemClick(prdtId);
                            }}
                            onSpotlightDown={_onSpotlightDown}
                            onSpotlightUp={_onSpotlightUp}
                            index={index}
                            aria-label={
                              "selected " +
                              prdtNm +
                              " " +
                              index * 1 +
                              1 +
                              " of 2"
                            }
                          >
                            <CustomImage
                              delay={0}
                              animationSpeed="fast"
                              src={imgUrl}
                              fallbackSrc={defaultImageItem}
                              alt={prdtNm}
                              ariaLabel={
                                "selected " +
                                prdtNm +
                                " " +
                                index * 1 +
                                1 +
                                " of 2"
                              }
                            />
                          </SpottableComponent>
                        );
                      })}
                  {hotelInfos &&
                    hotelInfos
                      .slice(0, 2)
                      .map(({ hotelImgUrl, hotelNm, hotelId }, index) => {
                        return (
                          <SpottableComponent
                            key={hotelId}
                            spotlightId={
                              index === 0 ? spotName : spotName + "_" + index
                            }
                            onClick={() => {
                              handleHotelClick(hotelId);
                            }}
                            onSpotlightDown={_onSpotlightDown}
                            onSpotlightUp={_onSpotlightUp}
                            index={index}
                            aria-label={
                              "selected " +
                              hotelNm +
                              " " +
                              index * 1 +
                              1 +
                              " of 2"
                            }
                          >
                            <CustomImage
                              delay={0}
                              animationSpeed="fast"
                              src={hotelImgUrl}
                              fallbackSrc={defaultImageItem}
                              alt={hotelNm}
                              ariaLabel={
                                "selected " +
                                hotelNm +
                                " " +
                                index * 1 +
                                1 +
                                " of 2"
                              }
                            />
                          </SpottableComponent>
                        );
                      })}
                </Container>
              </div>
            );
          }
        )}
    </>
  );
}
