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

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

import Alert from "@enact/sandstone/Alert";
import Spotlight from "@enact/spotlight";
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
import Spottable from "@enact/spotlight/Spottable";

import defaultImageItem from "../../../assets/images/img-thumb-empty-product@3x.png";
import { cancelFocusElement, focusElement } from "../../actions/commonActions";
import { SpotlightIds } from "../../utils/SpotlightIds";
import CustomImage from "../CustomImage/CustomImage";
import TButton from "../TButton/TButton";
import css from "../TPopUp/TPopUp.module.less";
import { $L, scaleH, scaleW } from "../../utils/helperMethods";
import TButtonTab from "../TButtonTab/TButtonTab";
import TButtonScroller from "../TButtonScroller/TButtonScroller";

const Container = SpotlightContainerDecorator(
  { enterTo: "default-element" },
  Spottable("div")
);

const OptionContainer = SpotlightContainerDecorator(
  { enterTo: "last-focused" },
  Spottable("ul")
);

const ButtonContainer = SpotlightContainerDecorator("div");
const ButtonContainerNegative = SpotlightContainerDecorator(
  { defaultElement: `[data-spotlight-id="${"tPopupBtn2"}"]` },
  "div"
);
const IntroTermsButtonContainer = SpotlightContainerDecorator(
  { defaultElement: '[data-spotlight-id="tPopupBtn1"]' },
  "div"
);
const SpottableComponent = Spottable("li");
const SpottableDiv = Spottable("div");

const KINDS = [
  "textPopup",
  "termsPopup",
  "introTermsPopup",
  "optionPopup",
  "eventBannerPopup",
  "supportPopup",
  "exitPopup",
  "couponPopup",
  "mobileSendPopup",
  "qrPopup",
  "checkoutTermsPopup",
  "scrollPopup",
  "watchPopup",
  "setPinCodePopup",
  "descriptionPopup",
  "errorPopup",
  "orderDetailPopup",
  "returnExchangePopup",
  "orderCancelPopup",
  "cancelConfirmPopup",
  "trackPackagePopup",
  "optionalAgreement",
  "wideLeftPopup",
  "normal",  
];

export const CONTENT_TYPES = {
  TERMS: 'terms',
  DEFAULT: 'default'
};


export default function TPopUp({
  kind,
  children,
  onExit,
  onClick,
  currentPage,
  onRightClick,
  onLeftClick,
  itemLength,
  onClose,
  hasButton,
  hasText,
  hasOnClose = false,
  hasIndicator,
  hasLogo,
  hasThumbnail,
  thumbnail,
  logo,
  className,
  button1Text,
  button2Text,
  open,
  title,
  text,
  type = "overlay",
  options,
  optionClick,
  selectedIndex,
  spotlightId,
  onSpotlightRight,
  contentType = CONTENT_TYPES.DEFAULT,
  termsData,
  onTermsAgree,
  ...rest
}) {
  const dispatch = useDispatch();
  const popupVisible = useSelector((state) => state.common.popup.popupVisible);
  const httpHeader = useSelector((state) => state.common.httpHeader);  

  // useEffect(() => {
  //   if (popupVisible) {
  //     if (spotlightId) {
  //       const timerId = setTimeout(() => {
  //         Spotlight.focus(spotlightId);
  //       }, 0);

  //       return () => {
  //         clearTimeout(timerId);
  //       };
  //     }
  //     const timerId = setTimeout(() => {
  //       Spotlight.focus(SpotlightIds.TPOPUP);
  //     }, 0);

  //     return () => {
  //       clearTimeout(timerId);
  //     };
  //   }
  // }, [spotlightId, popupVisible]);

  
  useEffect(() => {
    if (popupVisible) {
      let focusTarget;
      if (spotlightId) {
        // console.log("focusTarget-1", spotlightId);
        focusTarget = spotlightId;
      } else if (kind === "introTermsPopup" || contentType === CONTENT_TYPES.TERMS) {
        // console.log("focusTarget-2", "tPopupBtn1");
        focusTarget = "tPopupBtn1";
      } else {
        // console.log("focusTarget-3 and kind and contentType", SpotlightIds.TPOPUP, kind, contentType);
        focusTarget = SpotlightIds.TPOPUP;
      }

      const timerId = setTimeout(() => {        
        console.log("focusTarget", focusTarget);
        Spotlight.focus(focusTarget);
      }, 200);

      return () => {
        clearTimeout(timerId);
      };
    }
  }, [popupVisible, spotlightId, kind, contentType]);

  useEffect(() => {
    if (KINDS.indexOf(kind) < 0) {
      console.error("TPopUp kind error");
    }
  }, [kind]);

  useEffect(() => {
    if (kind === "introTermsPopup") {
      console.log("introTermsPopup");
      // Spotlight.focus("introTermsAgreeBtn");
    }
  }, [kind]);

  const ButtonContainerComp = useMemo(() => {
    if (kind === "exitPopup") {
      return ButtonContainerNegative;
    }
    if (kind === "introTermsPopup") {
      return IntroTermsButtonContainer;
    }
    return ButtonContainer;
  }, [kind]);
  
  
  // optionalAgreement
  // 자동으로 Yes/No 버튼 텍스트 설정
  
  const finalButton1Text = useMemo(() => {
    if (kind === "optionalAgreement" && !button1Text) {
      return "Yes";
    }
    return button1Text;
  }, [kind, button1Text]);
  
  const finalButton2Text = useMemo(() => {
    if (kind === "optionalAgreement" && !button2Text) {
      return "No";
    }
    return button2Text;
  }, [kind, button2Text]);
  
  // optionalAgreement일 경우 항상 버튼 표시
  const shouldShowButtons = useMemo(() => {
    return hasButton || kind === "optionalAgreement" || kind === "introTermsPopup";
  }, [hasButton, kind]);

  //-------------------------------------------------------

  // const _onClick = useCallback(
  //   (e) => {
  //     if (onClick) {
  //       onClick(e);
  //     } else if (kind === "exitPopup") _onExit();
  //     else _onClose();
  //   },
  //   [onClick, kind, _onExit, _onClose]
  // );

  // onClick 핸들러 수정 - 약관 동의 처리 추가
  const _onClick = useCallback(
    (e) => {
      if (contentType === CONTENT_TYPES.TERMS && onTermsAgree) {
        onTermsAgree(e);
      } else if (onClick) {
        onClick(e);
      } else if (kind === "exitPopup") {
        _onExit();
      } else {
        _onClose();
      }
    },
    [contentType, onTermsAgree, onClick, kind, _onExit, _onClose]
  );

  const _optionClick = useCallback(
    (e, idx) => {
      if (optionClick) {
        optionClick(e, idx);
      }
    },
    [optionClick]
  );

  const _onExit = useCallback(
    (e) => {
      if (onExit) {
        onExit(e);
      }
    },
    [onExit]
  );

  const _onClose = useCallback(
    (e) => {
      if (onClose) {
        onClose(e);
      }
    },
    [onClose]
  );
  const selectedOptClick = useCallback(
    (index, optionStockQuantity) => (e) => {
      if (optionStockQuantity && optionStockQuantity <= 0) {
        return;
      }
      _optionClick(index);
    },
    [_optionClick]
  );

  const _onLeftClick = useCallback(
    (e) => {
      if (onLeftClick) {
        onLeftClick(e);
      }
    },
    [onLeftClick]
  );
  const _onRightClick = useCallback(
    (e) => {
      if (onRightClick) {
        onRightClick(e);
      }
    },
    [onRightClick]
  );

  const _onSpotlightRight = useCallback(
    (e) => {
      if (onSpotlightRight) {
        onSpotlightRight(e);
      }
    },
    [onSpotlightRight]
  );

  const ariaHidden = useMemo(() => {
    const deviceCountryCode = httpHeader?.["X-Device-Country"] || "";
    if (deviceCountryCode === "US") {
      return false;
    } else {
      return true;
    }
  }, [httpHeader]);

  // 약관 제목 매핑 함수
  const getTermsTitle = useCallback((trmsTpCd) => {
    switch(trmsTpCd) {
      case "MST00401":
        return $L("Privacy Policy");
      case "MST00402":
        return $L("Terms & Conditions");
      case "MST00405":
        return $L("Optional Terms");
      default:
        return "";
    }
  }, []);

  // 약관 상세보기 팝업시 렌더링 함수
  const renderTermsContent = useCallback(() => {
    if (!termsData) return null;

    return (
      <div className={css.introTermsConts}>
        <TButtonTab
          className={css.tab}
          selectedIndex={0}
          contents={[getTermsTitle(termsData.trmsTpCd)]}
          spotlightDisabled={true}
          role="button"
        />
        <TButtonScroller
          boxHeight={scaleH(300)}
          width={scaleW(980)}
          className={css.termsDescription}
        >
          <div
            className={css.termsDesc}
            dangerouslySetInnerHTML={{
              __html: termsData.trmsCntt,
            }}
          />
        </TButtonScroller>
      </div>
    );
  }, [termsData, getTermsTitle]);


  // 약관 동의 핸들러
  const handleTermsAgree = useCallback((e) => {
    if (onTermsAgree) {
      onTermsAgree(e);
    }
    if (onClick) {
      onClick(e);
    }
  }, [onTermsAgree, onClick]);

  // 컨텐츠 타입별 렌더링 함수
  const renderContent = useMemo(() => {
    switch(contentType) {
      case CONTENT_TYPES.TERMS:
        return renderTermsContent();
      default:
        return children;
    }
  }, [contentType, children, renderTermsContent]);

  
  return (
    <Alert
      open={open}
      onClose={_onClose}
      type={type}
      className={classNames(
        css.tPopUp,
        css[kind],
        title && css.title,
        text && css.text,
        hasButton && css.hasButton,
        kind === "optionalTermsConfirmPopup" && css.bottomPopup,
        className ? className : null
      )}
      aria-hidden={ariaHidden}
    >
      <Container className={css.info} spotlightId={SpotlightIds.TPOPUP}>
        {hasThumbnail && thumbnail && (
          <div className={css.thumbnail}>
            <CustomImage
              src={thumbnail}
              fallbackSrc={defaultImageItem}
              alt="thumbnail"
            />
          </div>
        )}
        {hasText && (
          <div className={css.textLayer}>
            {title && (
              <div className={css.title} aria-label={title + "heading 1"}>
                {title}
              </div>
            )}
            {hasLogo && logo !== null && (
              <span>
                <CustomImage
                  src={logo}
                  fallbackSrc={defaultImageItem}
                  alt="logo"
                />
              </span>
            )}
            {text && (
              <div className={css.text} aria-label={text}>
                {text}
              </div>
            )}
          </div>
        )}
        {options && (
          <OptionContainer
            className={classNames(
              css.optionLayer,
              options.length >= 5 ? css.optionScroll : null
            )}
          >
            {options.map((option, index) => {
              const { prodOptCval, optImgUrl, optPrc, optStkQty, optNm } =
                option;
              const optStock = Number(optStkQty);

              return (
                <SpottableComponent
                  {...rest}
                  className={classNames(
                    css.option,
                    optStkQty > 0 &&
                      index === selectedIndex &&
                      css.selectedOption,

                    index == selectedIndex && css.focused,
                    optStkQty <= 0 && css.optionSoldOut
                  )}
                  spotlightId={`selectedOptionBtn-${index}`}
                  onClick={selectedOptClick(index, optStkQty)}
                  key={`option: ${index}`}
                  aria-label={optNm ? optNm : prodOptCval}
                  spotlightDisabled={optStkQty && optStkQty <= 0}
                >
                  {optImgUrl && (
                    <CustomImage
                      src={optImgUrl}
                      className={css.img}
                      fallbackSrc={defaultImageItem}
                      alt="optionImg"
                    />
                  )}
                  <div className={css.optionItem}>
                    <span>{optNm ? optNm : prodOptCval}</span>
                    {optStkQty && optStkQty <= 0 && (
                      <span>{$L("SOLD OUT")}</span>
                    )}
                  </div>

                  {optPrc && optStock !== 0 && `($${optPrc})`}
                </SpottableComponent>
              );
            })}
          </OptionContainer>
        )}
        {renderContent}
        {hasIndicator && (
          <>
            {currentPage !== 0 && (
              <SpottableDiv
                className={css.leftBtn}
                onClick={_onLeftClick}
                aria-label="Move to left"
                role="button"
              ></SpottableDiv>
            )}
            {currentPage !== itemLength - 1 && (
              <SpottableDiv
                className={css.rightBtn}
                onClick={_onRightClick}
                aria-label="Move to Right"
                role="button"
              ></SpottableDiv>
            )}
          </>
        )}
        {shouldShowButtons && (
          <ButtonContainerComp className={css.buttonContainer}>
            {finalButton1Text && (
              <TButton
                spotlightId="tPopupBtn1"
                onClick={_onClick}
                role="button"
                ariaLabel={finalButton1Text}
                onSpotlightRight={_onSpotlightRight}
              >
                {finalButton1Text}
              </TButton>
            )}
            {finalButton2Text && (
              <TButton
                spotlightId="tPopupBtn2"
                onClick={onClose}
                role="button"
                ariaLabel={finalButton2Text}
              >
                {finalButton2Text}
              </TButton>
            )}
          </ButtonContainerComp>
        )}
      </Container>
    </Alert>
  );
}
