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

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

import Spotlight from "@enact/spotlight";

import { setHidePopup, setShowPopup } from "../../../actions/commonActions";
import {
  getMyFavoriteFlag,
  setMainLikeCategory,
} from "../../../actions/mainActions";
import { deleteMyFavorite } from "../../../actions/myPageActions";
import TButton from "../../../components/TButton/TButton";
import TPopUp from "../../../components/TPopUp/TPopUp";
import * as Config from "../../../utils/Config";
import { $L } from "../../../utils/helperMethods";
import css from "./FavoriteBtn.module.less";
import { disableNotification } from "../../../lunaSend";
import { sendLogTotalRecommend } from "../../../actions/logActions";

export default function FavoriteBtn({
  selectedPatnrId,
  selectedPrdtId,
  favoriteFlag,
  onFavoriteFlagChanged,
  logMenu,
}) {
  const dispatch = useDispatch();
  const { popupVisible, activePopup } = useSelector(
    (state) => state.common.popup
  );

  const handleFavoriteClick = useCallback(() => {
    dispatch(
          sendLogTotalRecommend({
              menu: logMenu,
              buttonTitle: "FAVORITE",
              contextName: Config.LOG_CONTEXT_NAME.DETAILPAGE,
              messageId: Config.LOG_MESSAGE_ID.BUTTONCLICK,
            })
          );
    switch (favoriteFlag) {
      case "N":
        dispatch(
          setMainLikeCategory({
            patnrId: selectedPatnrId,
            prdtId: selectedPrdtId,
          })
        );
        dispatch(setShowPopup(Config.ACTIVE_POPUP.favoritePopup));
        break;
      case "Y": {
        const productList = [
          { patnrId: selectedPatnrId, prdtId: selectedPrdtId },
        ];
        const showList = [];
        dispatch(deleteMyFavorite({ productList, showList }));
        dispatch(setShowPopup(Config.ACTIVE_POPUP.favoritePopup));

        break;
      }
    }
  }, [dispatch, favoriteFlag, selectedPatnrId, selectedPrdtId , logMenu]);

  const PopUpOnClick = useCallback(() => {
    setTimeout(() => Spotlight.focus("favoriteBtn"));
    dispatch(setHidePopup());
    onFavoriteFlagChanged(favoriteFlag === "Y" ? "N" : "Y");
  }, [dispatch, favoriteFlag, onFavoriteFlagChanged]);

  return (
    <div className={css.favorBtnContainer}>
      <TButton
        className={classNames(
          favoriteFlag === "N" ? css.favorBtn : css.favorUnableBtn
        )}
        onClick={handleFavoriteClick}
        ariaLabel="Register in Favorites"
        spotlightId={"favoriteBtn"}
      />
      {activePopup === Config.ACTIVE_POPUP.favoritePopup && (
        <TPopUp
          kind="textPopup"
          open={popupVisible}
          onClose={PopUpOnClick}
          hasButton
          button1Text={$L("OK")}
          hasText
          text={
            favoriteFlag && favoriteFlag === "N"
              ? $L("Added to My Favorites List")
              : $L("Removed from My Favorites List")
          }
          onClick={PopUpOnClick}
        />
      )}
    </div>
  );
}
