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

import classNames from "classnames";
import { useDispatch, useSelector } 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 {
  clearEventIssuedStatusSuccess,
  getEventIssuedStaus,
} from "../../../../actions/eventActions";
import { pushPanel } from "../../../../actions/panelActions";
import CustomImage from "../../../../components/CustomImage/CustomImage";
import usePrevious from "../../../../hooks/usePrevious";
import { panel_names } from "../../../../utils/Config";
import css from "./TCFI.module.less";

const SpottableComponent = Spottable("div");
const Container = SpotlightContainerDecorator(
  {
    enterTo: "last-focused",
    leaveFor: { right: "", down: "" },
  },
  "div"
);
export default function TCFI({
  className,
  data,
  orders,
  onSpotlightDown,
  onSpotlightUp,
  mobilePop,
  changePop,
  osVersion,
  eventInfo,
  sendLogClick,
}) {
  const bgImgNm = data && data[0].bgImgNo !== null ? data[0].bgImgNo : null;
  let typeChk = data && data[0].hotelInfos?.length !== 0 ? "hotel" : "theme";
  const [popCloseChk, setPopCloseChk] = useState(false);
  const [smsRetCode, setSmsRetCode] = useState(undefined);
  const [clickEvt, setClickEvt] = useState(false);
  const eventIssuedStatusSuccess = useSelector(
    (state) => state.event?.eventIssuedStatusSuccess
  );

  const currentSmsRetCode = usePrevious(smsRetCode);

  const dispatch = useDispatch();

  const handleItemClick = useCallback(() => {
    const { evntTpCd, evntId, patnrId, curationId, curationNm, eventInfoV2 } =
      data[0];
    if (sendLogClick) {
      sendLogClick();
    }

    if (
      eventInfo?.evntTpCd === "EVT00102" ||
      eventInfo?.evntTpCd === "EVT00104"
    ) {
      dispatch(getEventIssuedStaus({ evntTpCd, evntId }));
      setClickEvt(true);
    } else {
      handelEvent();
      setClickEvt(false);
    }
  }, [dispatch, sendLogClick, eventInfo]);

  const changePopTCFI = useCallback(
    (patnrId, curationId, evntId, evntTpCd, eventInfoV2) => {
      if (changePop) {
        changePop(patnrId, curationId, evntId, evntTpCd, eventInfoV2);
      }
    },
    [changePop]
  );

  const handelEvent = () => {
    const {
      evntTpCd,
      evntId,
      patnrId,
      curationId,
      curationNm,
      eventInfoV2,
      productInfos,
      hotelInfos,
    } = data[0];
    if (data && data[0].hotelInfos?.length !== 0) {
      dispatch(
        pushPanel({
          name: panel_names.DETAIL_PANEL,
          panelInfo: {
            patnrId: patnrId,
            prdtId: hotelInfos[0].hotelId,
            curationId: curationId,
            curationNm: curationNm,
            bgImgNo: bgImgNm,
            type: "hotel",
          },
        })
      );
    } else {
      if (eventInfo?.evntTpCd === "EVT00107") {
        if (osVersion === false) {
          if (mobilePop !== "Y") {
            dispatch(
              pushPanel({
                name: panel_names.DETAIL_PANEL,
                panelInfo: {
                  patnrId: patnrId,
                  prdtId: productInfos[0].prdtId,
                  curationId: curationId,
                  curationNm: curationNm,
                  bgImgNo: bgImgNm,
                  type: typeChk,
                },
              })
            );
          } else {
            changePopTCFI(patnrId, curationId, evntId, evntTpCd, eventInfoV2);
          }
        } else {
          if (eventInfo !== null) {
            changePopTCFI(patnrId, curationId, evntId, evntTpCd, eventInfoV2);
          } else {
            if (mobilePop !== "Y") {
              dispatch(
                pushPanel({
                  name: panel_names.DETAIL_PANEL,
                  panelInfo: {
                    patnrId: patnrId,
                    curationId: curationId,
                    curationNm: curationNm,
                    bgImgNo: bgImgNm,
                    type: typeChk,
                  },
                })
              );
            } else {
              changePopTCFI(patnrId, curationId, evntId, evntTpCd, eventInfoV2);
            }
          }
        }
      } else {
        if (eventInfo !== null) {
          changePopTCFI(patnrId, curationId, evntId, evntTpCd, eventInfoV2);
        } else {
          if (mobilePop !== "Y") {
            dispatch(
              pushPanel({
                name: panel_names.DETAIL_PANEL,
                panelInfo: {
                  patnrId: patnrId,
                  prdtId: productInfos[0].prdtId,
                  curationId: curationId,
                  curationNm: curationNm,
                  bgImgNo: bgImgNm,
                  type: typeChk,
                },
              })
            );
          } else {
            changePopTCFI(patnrId, curationId, evntId, evntTpCd, "");
          }
        }
      }
    }
    setClickEvt(false);
  };

  useEffect(() => {
    setSmsRetCode(eventIssuedStatusSuccess);
  }, [eventIssuedStatusSuccess, smsRetCode]);

  useEffect(() => {
    if (smsRetCode === 0) {
      if (clickEvt === true) {
        handelEvent();
      }
    }
    setSmsRetCode(undefined);
    dispatch(clearEventIssuedStatusSuccess());
  }, [clickEvt, smsRetCode]);

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

  const _onSpotlightDown = useCallback(
    (ev) => {
      ev.stopPropagation();

      if (onSpotlightDown) {
        onSpotlightDown(ev);
      }
    },
    [onSpotlightDown]
  );

  const _onSpotlightUp = useCallback(
    (ev) => {
      ev.stopPropagation();

      if (onSpotlightUp) {
        onSpotlightUp(ev);
      }
    },
    [onSpotlightUp]
  );

  return (
    <>
      {data &&
        data.map(({ bgImgPath, curationNm, curationId }) => {
          return (
            <Container
              key={curationId}
              className={classNames(className && className)}
            >
              <SpottableComponent
                className={css.fullImg}
                spotlightId={spotName}
                onSpotlightDown={_onSpotlightDown}
                onSpotlightUp={_onSpotlightUp}
                onClick={handleItemClick}
                aria-label={"selected " + curationNm}
                role=""
              >
                <CustomImage
                  delay={0}
                  animationSpeed="fast"
                  src={bgImgPath}
                  fallbackSrc={defaultImageItem}
                  alt={"selected " + curationNm}
                  ariaLabel={"selected " + curationNm}
                />
              </SpottableComponent>
            </Container>
          );
        })}
    </>
  );
}
