import React, { useCallback } from "react";

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

import { Spotlight } from "@enact/spotlight";

import { pushPanel, updatePanel } from "../../../../../actions/panelActions";
import TItemCard from "../../../../../components/TItemCard/TItemCard";
import usePriceInfo from "../../../../../hooks/usePriceInfo";
import useScrollReset from "../../../../../hooks/useScrollReset";
import {
  LOG_CONTEXT_NAME,
  LOG_MESSAGE_ID,
  panel_names,
} from "../../../../../utils/Config";
import css from "./ThemeCurationProductListItem.module.less";
import { sendLogThemeProduct } from "../../../../../actions/logActions";

export default function ThemeCurationProductListItem({
  contentsIndex,
  itemIndex,
  scrollLeft,
  shelfProductInfosLength,
  themeProductInfosItem,
}) {
  const { handleScrollReset, handleStopScrolling } = useScrollReset(
    scrollLeft,
    true
  );

  const dispatch = useDispatch();

  const panels = useSelector((state) => state.panels.panels);
  const panelInfo = useSelector(
    (state) => state.panels.panels[panels?.length - 1]?.panelInfo
  );

  const themeMenuShelfInfo = useSelector(
    (state) => state.home.themeMenuShelfInfoData
  );

  const { imgUrl, lgCatCd, offerInfo, prdtId, prdtNm, priceInfo } =
    themeProductInfosItem;

  const { originalPrice, discountedPrice, rewardFlag } =
    usePriceInfo(priceInfo) || {};

  const handleBlur = useCallback(() => {
    if (itemIndex === 0) {
      handleStopScrolling();
    }
  }, [itemIndex, handleStopScrolling]);

  const handleClick = useCallback(
    (e) => {
      const tItemCard = e.currentTarget;
      // const tBody = document.querySelector(
      //   `[id="${SpotlightIds.TBODY}"]`
      // );

      const xContainer = tItemCard?.parentNode?.parentNode?.parentNode;
      // const yContainer = tBody?.children[0]?.children[0]?.children[0];

      if (xContainer) {
        const x = xContainer.scrollLeft;
        // const y = yContainer.scrollTop;

        dispatch(
          updatePanel({
            name: panel_names.THEME_CURATION_PANEL,
            panelInfo: { x },
          })
        );

        dispatch(
          pushPanel({
            name: panel_names.DETAIL_PANEL,
            panelInfo: {
              patnrId: themeProductInfosItem?.patnrId,
              prdtId: themeProductInfosItem?.prdtId,
            },
          })
        );
      }

      const params = {
        befPrice: originalPrice,
        curationId: themeMenuShelfInfo?.curationId,
        curationNm: themeMenuShelfInfo?.curationNm,
        lastPrice: discountedPrice,
        lgCatCd: themeProductInfosItem?.lgCatCd ?? "",
        lgCatNm: themeProductInfosItem?.lgCatNm ?? "",
        linkTpCd: panelInfo?.linkTpCd ?? "",
        patncNm: themeProductInfosItem?.patncNm,
        patnrId: themeProductInfosItem?.patnrId,
        prdtExpsOrd: themeProductInfosItem?.prdtExpsOrd,
        prdtId: themeProductInfosItem?.prdtId,
        prdtNm: themeProductInfosItem?.prdtNm,
        rewdAplyFlag: rewardFlag,
        shelfExpsOrd:
          themeMenuShelfInfo?.shelfInfos[contentsIndex]?.shelfExpsOrd,
        shelfId: themeMenuShelfInfo?.shelfInfos[contentsIndex]?.shelfId,
        shelfNm: themeMenuShelfInfo?.shelfInfos[contentsIndex]?.shelfNm,
        tsvFlag: themeProductInfosItem?.todaySpclFlag,
      };

      dispatch(sendLogThemeProduct(params));
    },
    [
      contentsIndex,
      discountedPrice,
      dispatch,
      originalPrice,
      panelInfo?.linkTpCd,
      rewardFlag,
      themeMenuShelfInfo,
      themeProductInfosItem,
    ]
  );

  const handleFocus = useCallback(() => {
    if (itemIndex === 0) {
      handleScrollReset();
    }
  }, [handleScrollReset, itemIndex]);

  // 24/7/23 조은성책임님 요청으로 다음 줄 첫 번째 상품 이동 주석
  // const handleSpotlightRight = useCallback(() => {
  //   if (itemIndex !== shelfProductInfosLength - 1) {
  //     return;
  //   }

  //   setTimeout(() => {
  //     Spotlight.focus(`theme-info-${contentsIndex + 1}`);
  //   });
  // }, [contentsIndex, itemIndex, shelfProductInfosLength]);

  return (
    <li className={css.productItem}>
      <TItemCard
        data-lg-category-code={lgCatCd}
        data-exposure-order={contentsIndex + 1}
        imageAlt={prdtNm}
        imageSource={imgUrl}
        onBlur={handleBlur}
        onClick={handleClick}
        onFocus={handleFocus}
        // onSpotlightRight={handleSpotlightRight}
        priceInfo={priceInfo}
        productId={prdtId}
        productName={prdtNm}
        offerInfo={offerInfo}
        curationId={themeMenuShelfInfo?.curationId}
        curationTitle={themeMenuShelfInfo?.curationNm}
        contentTitle={prdtNm}
        shelfId={themeMenuShelfInfo?.shelfInfos[contentsIndex]?.shelfId}
        shelfLocation={
          themeMenuShelfInfo?.shelfInfos[contentsIndex]?.shelfExpsOrd
        }
        shelfTitle={themeMenuShelfInfo?.shelfInfos[contentsIndex]?.shelfNm}
        patnerName={themeProductInfosItem?.patncNm}
        order={themeProductInfosItem?.prdtExpsOrd}
        contextName={LOG_CONTEXT_NAME.THEME_CURATION}
        messageId={LOG_MESSAGE_ID.SHELF_CLICK}
      />
    </li>
  );
}
